complete story 10.2

This commit is contained in:
Naser Mansour
2026-01-03 03:29:51 +02:00
parent e758458df1
commit 44f291fbc3
19 changed files with 157 additions and 100 deletions
+11 -11
View File
@@ -10,7 +10,7 @@ test('card component renders with default variant', function () {
$html = Blade::render('<x-ui.card>Card content</x-ui.card>');
expect($html)
->toContain('bg-cream')
->toContain('bg-off-white')
->toContain('rounded-lg')
->toContain('p-6')
->toContain('shadow-card')
@@ -21,7 +21,7 @@ test('card component renders with elevated variant', function () {
$html = Blade::render('<x-ui.card variant="elevated">Elevated card</x-ui.card>');
expect($html)
->toContain('bg-cream')
->toContain('bg-off-white')
->toContain('rounded-lg')
->toContain('p-6')
->toContain('shadow-md')
@@ -55,7 +55,7 @@ test('card component applies highlight border when highlight is true', function
expect($html)
->toContain('border-s-4')
->toContain('border-gold')
->toContain('border-warm-gray')
->toContain('Highlighted card');
});
@@ -64,7 +64,7 @@ test('card component does not apply highlight border when highlight is false', f
expect($html)
->not->toContain('border-s-4')
->not->toContain('border-gold')
->not->toContain('border-warm-gray')
->toContain('Normal card');
});
@@ -73,7 +73,7 @@ test('card component allows custom classes via attributes', function () {
expect($html)
->toContain('custom-class')
->toContain('bg-cream')
->toContain('bg-off-white')
->toContain('Custom class card');
});
@@ -86,7 +86,7 @@ test('card component supports multiple props together', function () {
->toContain('hover:-translate-y-0.5')
->toContain('cursor-pointer')
->toContain('border-s-4')
->toContain('border-gold')
->toContain('border-warm-gray')
->toContain('Full featured card');
});
@@ -102,14 +102,14 @@ test('stat card displays value and label correctly', function () {
->toContain('Total Items')
->toContain('text-2xl')
->toContain('font-bold')
->toContain('text-navy');
->toContain('text-charcoal');
});
test('stat card renders icon when provided', function () {
$html = Blade::render('<x-ui.stat-card icon="users" value="100" label="Users" />');
expect($html)
->toContain('bg-gold/10')
->toContain('bg-warm-gray/10')
->toContain('rounded-lg')
->toContain('100')
->toContain('Users');
@@ -120,7 +120,7 @@ test('stat card hides icon container when icon is null', function () {
// Icon container should not be rendered when icon is null
expect($html)
->not->toContain('bg-gold/10')
->not->toContain('bg-warm-gray/10')
->toContain('50')
->toContain('Items');
});
@@ -175,7 +175,7 @@ test('stat card is wrapped in a card component', function () {
// Should contain card styling
expect($html)
->toContain('bg-cream')
->toContain('bg-off-white')
->toContain('rounded-lg')
->toContain('p-6');
});
@@ -184,7 +184,7 @@ test('stat card displays all elements together', function () {
$html = Blade::render('<x-ui.stat-card icon="chart-bar" value="1,234" label="Total Sales" :trend="25" />');
expect($html)
->toContain('bg-gold/10') // Icon container
->toContain('bg-warm-gray/10') // Icon container
->toContain('1,234') // Value
->toContain('Total Sales') // Label
->toContain('+25%') // Trend
+10 -5
View File
@@ -213,11 +213,16 @@ describe('Tailwind Colors', function () {
test('app.css contains brand colors', function () {
$css = file_get_contents(resource_path('css/app.css'));
expect($css)->toContain('--color-navy: #0A1F44');
expect($css)->toContain('--color-gold: #D4AF37');
expect($css)->toContain('--color-gold-light: #F4E4B8');
expect($css)->toContain('--color-cream: #F9F7F4');
expect($css)->toContain('--color-charcoal: #2C3E50');
// New brand palette from Story 10.1
expect($css)->toContain('--color-primary: #4A4A42'); // Charcoal
expect($css)->toContain('--color-accent: #C9C4BA'); // Warm Gray
expect($css)->toContain('--color-accent-light: #E8E4DC'); // Off-White
expect($css)->toContain('--color-background: #E8E4DC'); // Off-White
expect($css)->toContain('--color-text: #1A1A1A'); // Deep Black
// Backward compatibility aliases (mapped to new colors)
expect($css)->toContain('--color-navy: var(--color-primary)');
expect($css)->toContain('--color-gold: var(--color-accent)');
});
});