Story 2.2: bouton cta navbar

This commit is contained in:
2026-02-04 16:54:25 +01:00
parent dd6c5d0a72
commit 8dd68ef584
5 changed files with 59 additions and 29 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -12,7 +12,7 @@ $navLinks = [
['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'], ['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'],
['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'], ['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'],
['id' => 'about', 'label' => 'Me Découvrir', 'url' => '/a-propos'], ['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"> <div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
<ul class="py-4 space-y-2 border-t border-border"> <ul class="py-4 space-y-2 border-t border-border">
<?php foreach ($navLinks as $link): ?> <?php foreach ($navLinks as $link): ?>
<li> <?php if (!empty($link['isCta'])): ?>
<a href="<?= $link['url'] ?>" <li class="pt-2 border-t border-border mt-2">
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"> <a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
<?= $link['label'] ?> <?= $link['label'] ?>
</a> </a>
</li> </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; ?> <?php endforeach; ?>
</ul> </ul>
</div> </div>

18
tests/cta.test.ps1 Normal file
View File

@@ -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'

View File

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