Partners Phase 2: Style Components & Composition

[wab]

Problem

La section Partners a été refactorisée (Phase 1) mais contient encore ~215 lignes de styles dupliqués:

• Typography H1/H2 display répétée 6+ fois
• Icon boxes (10x10, 16x16) répétées 4+ fois
• Form labels (xs, uppercase) répétées 4+ fois
• PartnerCard: 45 lignes de hover states imbriqués

Solution

Appliquer les patterns de composition avec séparation style/contenu à 2 niveaux:

A) Composants partagés (atoms/)

• Text - Typography avec variants (display-xl, display-lg, subtitle, body, label)
• IconBox - Conteneur d'icônes avec sizes et variants
• FormField - Wrapper label + input

B) Local style wrappers (même fichier, non exportés)

Deux approches selon le use case:

1. css() — styles simples sans variants
2. styled() — styles avec variants (PRÉFÉRÉ pour single-use avec props)

import { styled } from 'styled-system/jsx';

// ===== STYLE WRAPPER avec variants =====
const CardWrapper = styled('div', {
  base: { bg: 'white', p: '8', rounded: 'xl', _hover: { shadow: 'xl' } },
  variants: {
    animate: {
      true: { animation: 'fade-in-up', opacity: 0 },
      false: { opacity: 1 },
    },
  },
  defaultVariants: { animate: false },
});

// ===== COMPOSANT PRINCIPAL =====
export function PartnerCard({ animate, children }) {
  return <CardWrapper animate={animate}>{children}</CardWrapper>;
}

Recipes vs styled() — Quand utiliser quoi ?

Critère	Recipe (panda.config.ts)	styled() (local)
Réutilisation	Multi-fichiers/pages	Fichier unique
Exemples	Text, Badge, Button	PartnerCardWrapper
Où	panda.config.ts	Haut du fichier composant
Export	Via styled-system/recipes	Non exporté

Recipes Panda CSS (réutilisables cross-project)

• text — 6 variants + 8 couleurs
• iconBox — 3 sizes + 3 variants + 5 couleurs

Local styled() wrappers (usage unique)

• PartnerCardWrapper — hover states + animate variant (dans partner-card.tsx)

Stories (14)

Voir stories.json pour le détail des features.

PRD & Plan

• specs/partners-style-components.md - PRD complet
• specs/partners-implementation-plan.md - Plan d'implémentation détaillé

Definition of Done

• 2 recipes ajoutées (text, iconBox)
• 3 atoms créés (text.tsx, icon-box.tsx, form-field.tsx)
• PartnerCard refactoré en compound component avec local styled() wrapper
• 5 sections partners mises à jour avec local style wrappers
• Build passe + TypeScript valide
• Rendu visuel identique sur /partners