✨ Story 2.2: bouton cta navbar

docs/stories/2.2.bouton-cta-navbar.md

@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -20,23 +20,23 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Styler le bouton CTA dans la navbar** (AC: 1)
-  - [] Appliquer la classe `btn-primary` au lien Contact
-  - [] Ajouter un espacement distinct (margin-left)
-  - [] Vérifier le contraste des couleurs
+- [x] **Task 1 : Styler le bouton CTA dans la navbar** (AC: 1)
+  - [x] Appliquer la classe `btn-primary` au lien Contact
+  - [x] Ajouter un espacement distinct (margin-left)
+  - [x] Vérifier le contraste des couleurs
 
-- [] **Task 2 : Assurer la visibilité mobile** (AC: 2)
-  - [] Vérifier que le CTA est présent dans le menu mobile
-  - [] Styler le CTA différemment dans le menu mobile (full-width ou mis en avant)
+- [x] **Task 2 : Assurer la visibilité mobile** (AC: 2)
+  - [x] Vérifier que le CTA est présent dans le menu mobile
+  - [x] Styler le CTA différemment dans le menu mobile (full-width ou mis en avant)
 
-- [] **Task 3 : Configurer le lien** (AC: 3)
-  - [] Le href pointe vers `/contact`
-  - [] Tester la navigation
+- [x] **Task 3 : Configurer le lien** (AC: 3)
+  - [x] Le href pointe vers `/contact`
+  - [x] Tester la navigation
 
-- [] **Task 4 : Implémenter les états interactifs** (AC: 4, 5)
-  - [] État hover (couleur plus claire)
-  - [] État focus visible (ring)
-  - [] État active (couleur plus foncée)
+- [x] **Task 4 : Implémenter les états interactifs** (AC: 4, 5)
+  - [x] État hover (couleur plus claire)
+  - [x] État focus visible (ring)
+  - [x] État active (couleur plus foncée)
 
 ## Dev Notes
 
@@ -88,32 +88,35 @@ Le bouton CTA est déjà prévu dans la Story 2.1. Vérifier que :
 
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
+| 2026-02-04 | 0.1 | Implementation story 2.2 | Amelia |
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
 
 ## Dev Agent Record
 
 ### Agent Model Used
 
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
 
 ### Debug Log References
 
-_Aucun_
+- tests/cta.test.ps1: CTA coverage
 
 ### Completion Notes List
 
-- CTA desktop déjà implémenté en story 2.1 (btn-primary text-sm, ml-4)
-- Menu mobile amélioré : CTA full-width avec séparateur visuel
+- CTA desktop confirmé (btn-primary text-sm, ml-4)
+- Menu mobile CTA full-width avec séparateur visuel
 - États interactifs via classe btn-primary (hover, focus, active)
 - Lien pointe vers /contact
-- Contraste vérifié (5.2:1 AA)
+- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### File List
 
 | Fichier | Action |
 |---------|--------|
-| `templates/navbar.php` | Modifié (CTA mobile) |
+| `templates/navbar.php` | Modifié (CTA mobile + label) |
 | `assets/css/output.css` | Regénéré |
+| `tests/cta.test.ps1` | Créé |
+| `tests/run.ps1` | Modifié |
 
 ## QA Results
 

templates/navbar.php

@@ -12,7 +12,7 @@ $navLinks = [
     ['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'],
     ['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'],
     ['id' => 'about', 'label' => 'Me Découvrir', 'url' => '/a-propos'],
-    ['id' => 'contact', 'label' => 'Contact', 'url' => '/contact', 'isCta' => true],
+    ['id' => 'contact', 'label' => 'Me contacter', 'url' => '/contact', 'isCta' => true],
 ];
 ?>
 
@@ -61,12 +61,20 @@ $navLinks = [
         <div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
             <ul class="py-4 space-y-2 border-t border-border">
                 <?php foreach ($navLinks as $link): ?>
-                    <li>
-                        <a href="<?= $link['url'] ?>"
-                           class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
-                            <?= $link['label'] ?>
-                        </a>
-                    </li>
+                    <?php if (!empty($link['isCta'])): ?>
+                        <li class="pt-2 border-t border-border mt-2">
+                            <a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
+                                <?= $link['label'] ?>
+                            </a>
+                        </li>
+                    <?php else: ?>
+                        <li>
+                            <a href="<?= $link['url'] ?>"
+                               class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
+                                <?= $link['label'] ?>
+                            </a>
+                        </li>
+                    <?php endif; ?>
                 <?php endforeach; ?>
             </ul>
         </div>

tests/cta.test.ps1

@@ -0,0 +1,18 @@
+$ErrorActionPreference = 'Stop'
+
+function Assert-True {
+  param(
+    [bool]$Condition,
+    [string]$Message
+  )
+  if (-not $Condition) { throw $Message }
+}
+
+Assert-True (Test-Path 'templates/navbar.php') 'Missing templates/navbar.php'
+$navbar = Get-Content -Raw 'templates/navbar.php'
+Assert-True ($navbar -match 'Me contacter') 'Navbar CTA label missing'
+Assert-True ($navbar -match 'btn-primary') 'Navbar CTA missing btn-primary'
+Assert-True ($navbar -match 'w-full justify-center') 'Mobile CTA missing full-width styling'
+Assert-True ($navbar -match '/contact') 'CTA link not /contact'
+
+'OK'

tests/run.ps1

@@ -5,4 +5,5 @@ $here = Split-Path -Parent $MyInvocation.MyCommand.Path
 & (Join-Path $here 'templates.test.ps1')
 & (Join-Path $here 'canary.test.ps1')
 & (Join-Path $here 'navbar.test.ps1')
+& (Join-Path $here 'cta.test.ps1')
 'OK'