✨ Story 2.2: bouton cta navbar
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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): ?>
|
||||||
|
<?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>
|
<li>
|
||||||
<a href="<?= $link['url'] ?>"
|
<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">
|
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'] ?>
|
<?= $link['label'] ?>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
18
tests/cta.test.ps1
Normal file
18
tests/cta.test.ps1
Normal 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'
|
||||||
@@ -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'
|
||||||
Reference in New Issue
Block a user