diff --git a/docs/stories/story-13.1-language-toggle-visibility.md b/docs/stories/story-13.1-language-toggle-visibility.md index 2902d65..6f9f7db 100644 --- a/docs/stories/story-13.1-language-toggle-visibility.md +++ b/docs/stories/story-13.1-language-toggle-visibility.md @@ -76,15 +76,15 @@ ## Dev Checklist -- [ ] Update Arabic link light variant classes -- [ ] Update English link light variant classes -- [ ] Update separator light variant class -- [ ] Verify dark variant unchanged -- [ ] Test on login page -- [ ] Test on forgot-password page -- [ ] Test RTL (Arabic) layout -- [ ] Test LTR (English) layout -- [ ] Verify contrast ratios +- [x] Update Arabic link light variant classes +- [x] Update English link light variant classes +- [x] Update separator light variant class +- [x] Verify dark variant unchanged +- [x] Test on login page +- [x] Test on forgot-password page +- [x] Test RTL (Arabic) layout +- [x] Test LTR (English) layout +- [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 diff --git a/resources/views/components/language-toggle.blade.php b/resources/views/components/language-toggle.blade.php index e64eede..72315a9 100644 --- a/resources/views/components/language-toggle.blade.php +++ b/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 @@ $variant === 'dark', - 'text-body/30' => $variant === 'light', + 'text-primary/50' => $variant === 'light', ])>| 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" > diff --git a/tests/Feature/Components/LanguageToggleTest.php b/tests/Feature/Components/LanguageToggleTest.php new file mode 100644 index 0000000..4c60002 --- /dev/null +++ b/tests/Feature/Components/LanguageToggleTest.php @@ -0,0 +1,137 @@ +'); + + // 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(''); + + 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(''); + + // 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(''); + + 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(''); + + // 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(''); + + expect($html)->toContain('text-cta/50'); + }); + + test('dark variant does not use light variant classes', function () { + App::setLocale('ar'); + + $html = Blade::render(''); + + // 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(''); + $darkHtml = Blade::render(''); + + // 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(''); + + // 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(''); + $darkHtml = Blade::render(''); + + // 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(''); + + expect($html) + ->toContain('العربية') + ->toContain('English') + ->toContain('language-switch-ar') + ->toContain('language-switch-en'); + }); + + test('contains separator between languages', function () { + $html = Blade::render(''); + + expect($html)->toContain('|'); + }); +});