complete story 13.1

docs/stories/story-13.1-language-toggle-visibility.md

@@ -76,15 +76,15 @@
 
 ## Dev Checklist
 
-- [ ] Update Arabic link light variant classes
+- [x] Update Arabic link light variant classes
-- [ ] Update English link light variant classes
+- [x] Update English link light variant classes
-- [ ] Update separator light variant class
+- [x] Update separator light variant class
-- [ ] Verify dark variant unchanged
+- [x] Verify dark variant unchanged
-- [ ] Test on login page
+- [x] Test on login page
-- [ ] Test on forgot-password page
+- [x] Test on forgot-password page
-- [ ] Test RTL (Arabic) layout
+- [x] Test RTL (Arabic) layout
-- [ ] Test LTR (English) layout
+- [x] Test LTR (English) layout
-- [ ] Verify contrast ratios
+- [x] Verify contrast ratios
 
 ## Estimation
 
@@ -94,3 +94,35 @@
 ## Dependencies
 
 - Epic 12 completed (brand colors defined)
+
+---
+
+## Dev Agent Record
+
+### Status
+Ready for Review
+
+### Agent Model Used
+Claude Opus 4.5
+
+### File List
+| File | Action |
+|------|--------|
+| `resources/views/components/language-toggle.blade.php` | Modified |
+| `tests/Feature/Components/LanguageToggleTest.php` | Created |
+
+### Change Log
+- Updated light variant inactive text from `text-body/70` to `text-primary`
+- Updated light variant hover text from `hover:text-body` to `hover:text-cta-hover`
+- Updated light variant hover background from `hover:bg-active-hover` to `hover:bg-primary/10`
+- Updated light variant separator from `text-body/30` to `text-primary/50`
+- Dark variant styling preserved unchanged
+- Active state styling preserved unchanged
+- Created comprehensive test suite (12 tests, 30 assertions)
+
+### Completion Notes
+- All acceptance criteria implemented
+- Light variant now uses Dark Forest Green (#2D3624) for inactive text - meets WCAG AA contrast on Warm Cream (#F4F1EA)
+- Hover states use Darker Gold (#8A7555) for better visual feedback
+- Separator visibility improved with 50% opacity primary color
+- Dark variant and active states remain unchanged as specified

resources/views/components/language-toggle.blade.php

@@ -7,7 +7,7 @@
             'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
             'bg-active text-white font-bold' => app()->getLocale() === 'ar',
             'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'dark',
-            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
+            'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'ar' && $variant === 'light',
         ])
         data-test="language-switch-ar"
     >
@@ -15,7 +15,7 @@
     </a>
     <span @class([
         'text-cta/50' => $variant === 'dark',
-        'text-body/30' => $variant === 'light',
+        'text-primary/50' => $variant === 'light',
     ])>|</span>
     <a
         href="{{ route('language.switch', 'en') }}"
@@ -23,7 +23,7 @@
             'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
             'bg-active text-white font-bold' => app()->getLocale() === 'en',
             'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'dark',
-            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'light',
+            'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'en' && $variant === 'light',
         ])
         data-test="language-switch-en"
     >

tests/Feature/Components/LanguageToggleTest.php

@@ -0,0 +1,137 @@
+<?php
+
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Blade;
+
+describe('Language Toggle Light Variant', function () {
+    test('light variant inactive language uses text-primary class', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // English link (inactive when locale is 'ar') should use text-primary
+        expect($html)
+            ->toContain('text-primary')
+            ->toContain('hover:text-cta-hover')
+            ->toContain('hover:bg-primary/10');
+    });
+
+    test('light variant separator uses text-primary/50 class', function () {
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        expect($html)->toContain('text-primary/50');
+    });
+
+    test('light variant does not use old text-body classes for inactive', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // Should NOT contain the old classes
+        expect($html)
+            ->not->toContain('text-body/70')
+            ->not->toContain('hover:text-body');
+    });
+
+    test('light variant separator does not use old text-body/30 class', function () {
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        expect($html)->not->toContain('text-body/30');
+    });
+});
+
+describe('Language Toggle Dark Variant', function () {
+    test('dark variant inactive language uses text-off-white class', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        // English link (inactive when locale is 'ar') should use text-off-white
+        expect($html)
+            ->toContain('text-off-white')
+            ->toContain('hover:text-cta')
+            ->toContain('hover:bg-active-hover');
+    });
+
+    test('dark variant separator uses text-cta/50 class', function () {
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        expect($html)->toContain('text-cta/50');
+    });
+
+    test('dark variant does not use light variant classes', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Should NOT contain light variant classes
+        expect($html)
+            ->not->toContain('text-primary/50')
+            ->not->toContain('hover:text-cta-hover')
+            ->not->toContain('hover:bg-primary/10');
+    });
+});
+
+describe('Language Toggle Active State', function () {
+    test('active language has correct styling regardless of variant', function () {
+        App::setLocale('ar');
+
+        $lightHtml = Blade::render('<x-language-toggle variant="light" />');
+        $darkHtml = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Both variants should show active state styling for Arabic
+        expect($lightHtml)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+
+        expect($darkHtml)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+    });
+
+    test('English shows active state when locale is English', function () {
+        App::setLocale('en');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // Should still have active styling classes present
+        expect($html)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+    });
+});
+
+describe('Language Toggle Default Variant', function () {
+    test('default variant is dark', function () {
+        App::setLocale('ar');
+
+        $defaultHtml = Blade::render('<x-language-toggle />');
+        $darkHtml = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Default should behave same as dark variant
+        expect($defaultHtml)
+            ->toContain('text-off-white')
+            ->toContain('text-cta/50');
+    });
+});
+
+describe('Language Toggle Structure', function () {
+    test('contains both Arabic and English language links', function () {
+        $html = Blade::render('<x-language-toggle />');
+
+        expect($html)
+            ->toContain('العربية')
+            ->toContain('English')
+            ->toContain('language-switch-ar')
+            ->toContain('language-switch-en');
+    });
+
+    test('contains separator between languages', function () {
+        $html = Blade::render('<x-language-toggle />');
+
+        expect($html)->toContain('|');
+    });
+});