124 lines
3.4 KiB
Markdown
124 lines
3.4 KiB
Markdown
# Story 2.2: Bouton CTA "Me Contacter" dans la Navbar
|
|
|
|
## Status
|
|
|
|
review
|
|
|
|
## Story
|
|
|
|
**As a** visiteur,
|
|
**I want** voir un bouton "Me contacter" visible en permanence,
|
|
**so that** je puisse initier un contact à tout moment sans chercher.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Le bouton "Me contacter" est stylé différemment des autres liens (bouton rempli, couleur d'accent)
|
|
2. Le bouton est visible sur desktop ET sur mobile (même dans le menu hamburger)
|
|
3. Le bouton redirige vers la page contact.php
|
|
4. Le bouton a un état hover/focus visible
|
|
5. Le bouton respecte l'accessibilité (focusable, contraste suffisant)
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [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
|
|
|
|
- [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)
|
|
|
|
- [x] **Task 3 : Configurer le lien** (AC: 3)
|
|
- [x] Le href pointe vers `/contact`
|
|
- [x] Tester la navigation
|
|
|
|
- [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
|
|
|
|
### Modification navbar.php
|
|
|
|
Le bouton CTA est déjà prévu dans la Story 2.1. Vérifier que :
|
|
|
|
```php
|
|
<?php if (!empty($link['isCta'])): ?>
|
|
<li class="ml-4">
|
|
<a href="<?= $link['url'] ?>" class="btn-primary text-sm">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
```
|
|
|
|
### Style du CTA dans le menu mobile
|
|
|
|
```php
|
|
<!-- Dans le menu mobile -->
|
|
<?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: ?>
|
|
<!-- ... liens normaux ... -->
|
|
<?php endif; ?>
|
|
```
|
|
|
|
### Vérification Contraste
|
|
|
|
| Élément | Couleurs | Ratio | Conformité |
|
|
|---------|----------|-------|------------|
|
|
| Texte bouton | `#17171F` sur `#FA784F` | 5.2:1 | AA |
|
|
|
|
## Testing
|
|
|
|
- [ ] Le bouton est orange (#FA784F) et se distingue des autres liens
|
|
- [ ] Le texte est lisible (fond sombre sur orange)
|
|
- [ ] Le hover change la couleur vers #FB9570
|
|
- [ ] Le focus affiche un ring visible
|
|
- [ ] Le bouton est présent et stylé dans le menu mobile
|
|
- [ ] La navigation vers /contact fonctionne
|
|
|
|
## Change Log
|
|
|
|
| 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
|
|
|
|
GPT-5 Codex
|
|
|
|
### Debug Log References
|
|
|
|
- tests/cta.test.ps1: CTA coverage
|
|
|
|
### Completion Notes List
|
|
|
|
- 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
|
|
- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
|
|
|
|
### File List
|
|
|
|
| Fichier | Action |
|
|
|---------|--------|
|
|
| `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
|
|
|
|
_À compléter par le QA agent_
|