@dsrc-cm/core 0.1.0

package/src/components/alert/alert.css

@@ -0,0 +1,187 @@
+/**
+ * DSRC Alert Component
+ * Composant d'alerte contextuelle (en page)
+ *
+ * Aligne sur les patrons du DSFR (fr-alert) adaptes pour le DSRC.
+ * - Barre d'accent a gauche (border-left)
+ * - Texte sombre (--dsrc-color-noir), fond pastel de la variante
+ * - 4 variantes : --info, --success, --warning, --error
+ * - Variante sans type : neutre (gris)
+ * - Taille reduite : --sm (ligne unique, pas de titre)
+ * - Fermable : bouton .dsrc-btn--close
+ *
+ * Markup:
+ *
+ *   <!-- Avec titre -->
+ *   <div class="dsrc-alert dsrc-alert--info" role="alert">
+ *     <h3 class="dsrc-alert__title">Titre de l'information</h3>
+ *     <p>Description optionnelle plus detaillee.</p>
+ *   </div>
+ *
+ *   <!-- Sans titre -->
+ *   <div class="dsrc-alert dsrc-alert--info" role="alert">
+ *     <p>Information : texte de l'alerte.</p>
+ *   </div>
+ *
+ *   <!-- Taille reduite -->
+ *   <div class="dsrc-alert dsrc-alert--info dsrc-alert--sm" role="alert">
+ *     <p>Information courte.</p>
+ *   </div>
+ *
+ *   <!-- Fermable -->
+ *   <div class="dsrc-alert dsrc-alert--info" role="alert">
+ *     <h3 class="dsrc-alert__title">Information</h3>
+ *     <p>Cliquer sur la croix pour fermer.</p>
+ *     <button type="button" class="dsrc-btn dsrc-btn--close">Masquer</button>
+ *   </div>
+ */
+
+/* ============================================
+ * 1. Base
+ * ============================================ */
+
+.dsrc-alert {
+  position: relative;
+  display: block;
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+  border-radius: var(--dsrc-radius-default);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  line-height: var(--dsrc-font-line-height-relaxed);
+  color: var(--dsrc-color-noir);
+  width: 100%;
+
+  /* Accent bar - left border (thicker than default, DSFR-inspired) */
+  border-left-style: solid;
+  border-left-width: var(--dsrc-spacing-1); /* 4px */
+  border-left-color: var(--dsrc-color-gris-400);
+
+  /* Default (no type): neutral grey */
+  background-color: var(--dsrc-color-gris-50);
+}
+
+/* ============================================
+ * 2. Title
+ * ============================================ */
+
+.dsrc-alert__title {
+  font-size: var(--dsrc-font-size-h4);
+  font-weight: var(--dsrc-font-weight-semibold);
+  line-height: var(--dsrc-font-line-height-normal);
+  margin: 0 0 var(--dsrc-spacing-2) 0;
+  color: var(--dsrc-color-noir);
+}
+
+/* ============================================
+ * 3. Description paragraphs
+ * ============================================ */
+
+.dsrc-alert > p {
+  margin: 0;
+}
+
+.dsrc-alert > p + p {
+  margin-top: var(--dsrc-spacing-2);
+}
+
+/* Links inside alert */
+.dsrc-alert a {
+  color: var(--dsrc-color-noir);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.dsrc-alert a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* ============================================
+ * 4. Type variants
+ *    Background: pastel / fond
+ *    Border-left: dark status color / bordure
+ *    Text stays --dsrc-color-noir (DSFR pattern)
+ * ============================================ */
+
+/* --- Info --- */
+.dsrc-alert--info {
+  background-color: var(--dsrc-color-info-fond);
+  border-left-color: var(--dsrc-color-info-bordure);
+}
+
+.dsrc-alert--info .dsrc-alert__title {
+  color: var(--dsrc-color-info-texte);
+}
+
+/* --- Success --- */
+.dsrc-alert--success {
+  background-color: var(--dsrc-color-succes-fond);
+  border-left-color: var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-alert--success .dsrc-alert__title {
+  color: var(--dsrc-color-succes-texte);
+}
+
+/* --- Warning --- */
+.dsrc-alert--warning {
+  background-color: var(--dsrc-color-alerte-fond);
+  border-left-color: var(--dsrc-color-alerte-bordure);
+}
+
+.dsrc-alert--warning .dsrc-alert__title {
+  color: var(--dsrc-color-alerte-texte);
+}
+
+/* --- Error --- */
+.dsrc-alert--error {
+  background-color: var(--dsrc-color-erreur-fond);
+  border-left-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-alert--error .dsrc-alert__title {
+  color: var(--dsrc-color-erreur-texte);
+}
+
+/* ============================================
+ * 5. Small size (--sm)
+ *    Reduced padding, single-line, no title expected
+ * ============================================ */
+
+.dsrc-alert--sm {
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-4);
+  font-size: var(--dsrc-font-size-small);
+}
+
+.dsrc-alert--sm .dsrc-alert__title {
+  font-size: var(--dsrc-font-size-body);
+  margin-bottom: var(--dsrc-spacing-1);
+}
+
+/* ============================================
+ * 6. Close button integration
+ *    Uses the shared .dsrc-btn.dsrc-btn--close
+ *    positioned in the top-right corner
+ * ============================================ */
+
+.dsrc-alert > .dsrc-btn--close {
+  position: absolute;
+  top: var(--dsrc-spacing-3);
+  right: var(--dsrc-spacing-3);
+}
+
+/* Extra right padding when a close button is present,
+   to prevent text overlapping the button.
+   Apply via the presence of the close button sibling.
+   Alternatively, authors can use padding-right directly. */
+.dsrc-alert:has(> .dsrc-btn--close) {
+  padding-right: var(--dsrc-spacing-8);
+}
+
+/* ============================================
+ * 7. Hidden state
+ *    When dismissed (JS sets aria-hidden="true")
+ * ============================================ */
+
+.dsrc-alert[aria-hidden="true"] {
+  display: none;
+}

package/src/components/badge/badge.css

@@ -0,0 +1,178 @@
+/**
+ * DSRC Badge Component
+ * Aligned with DSFR quality patterns
+ *
+ * Semantic variants:
+ *   --success .... Green (validated, complete)
+ *   --error ...... Red (rejected, failed)
+ *   --warning .... Orange/amber (pending, attention)
+ *   --info ....... Blue (informational)
+ *   --neutral .... Grey (default / no semantic meaning)
+ *   --new ........ Primary green (novelty / "Nouveau")
+ *
+ * Color variants:
+ *   --green ...... Explicit green coloring
+ *   --orange ..... Explicit orange coloring
+ *   --purple ..... Explicit purple coloring
+ *
+ * Modifiers:
+ *   --sm ......... Smaller badge
+ *   --no-icon .... Hides the icon slot
+ *
+ * Groups:
+ *   .dsrc-badges-group (flex-wrap container for badge lists)
+ *
+ * Usage:
+ *   <p class="dsrc-badge dsrc-badge--success">Valide</p>
+ *   <p class="dsrc-badge dsrc-badge--sm dsrc-badge--info">Information</p>
+ *   <p class="dsrc-badge dsrc-badge--new">Nouveau</p>
+ *
+ *   <ul class="dsrc-badges-group">
+ *     <li><p class="dsrc-badge dsrc-badge--new">Nouveau</p></li>
+ *     <li><p class="dsrc-badge dsrc-badge--neutral">Libelle</p></li>
+ *   </ul>
+ */
+
+
+/* ============================================
+ * 1. Base badge
+ * ============================================ */
+
+.dsrc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-1);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  font-weight: var(--dsrc-font-weight-semibold);
+  line-height: 1;
+  padding: var(--dsrc-spacing-1) var(--dsrc-spacing-2);
+  border-radius: var(--dsrc-radius-small);
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: var(--dsrc-font-letter-spacing-caps);
+
+  /* Default appearance (unstyled / no variant) */
+  background-color: var(--dsrc-color-gris-100);
+  color: var(--dsrc-color-gris-700);
+}
+
+
+/* ============================================
+ * 2. Semantic variants
+ * ============================================ */
+
+/* Success */
+.dsrc-badge--success {
+  background-color: var(--dsrc-color-succes-fond);
+  color: var(--dsrc-color-succes-texte);
+}
+
+/* Error */
+.dsrc-badge--error {
+  background-color: var(--dsrc-color-erreur-fond);
+  color: var(--dsrc-color-erreur-texte);
+}
+
+/* Warning */
+.dsrc-badge--warning {
+  background-color: var(--dsrc-color-alerte-fond);
+  color: var(--dsrc-color-alerte-texte);
+}
+
+/* Info */
+.dsrc-badge--info {
+  background-color: var(--dsrc-color-info-fond);
+  color: var(--dsrc-color-info-texte);
+}
+
+/* Neutral */
+.dsrc-badge--neutral {
+  background-color: var(--dsrc-color-gris-100);
+  color: var(--dsrc-color-gris-700);
+}
+
+/* New / Novelty (primary green) */
+.dsrc-badge--new {
+  background-color: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+
+/* ============================================
+ * 3. Color variants (explicit hue, not semantic)
+ * ============================================ */
+
+.dsrc-badge--green {
+  background-color: var(--dsrc-color-succes-fond);
+  color: var(--dsrc-color-succes-texte);
+}
+
+.dsrc-badge--orange {
+  background-color: var(--dsrc-color-alerte-fond);
+  color: var(--dsrc-color-alerte-texte);
+}
+
+.dsrc-badge--purple {
+  background-color: var(--dsrc-color-purple-fond);
+  color: var(--dsrc-color-purple-texte);
+}
+
+
+/* ============================================
+ * 4. Size variants
+ * ============================================ */
+
+/* Small badge */
+.dsrc-badge--sm {
+  font-size: var(--dsrc-font-size-micro);
+  padding: 2px var(--dsrc-spacing-1);
+  gap: 2px;
+}
+
+
+/* ============================================
+ * 5. Icon handling
+ * ============================================ */
+
+/* Badge icon slot */
+.dsrc-badge__icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* Small badge icon */
+.dsrc-badge--sm .dsrc-badge__icon {
+  width: 10px;
+  height: 10px;
+}
+
+/* Hide icon when --no-icon modifier is applied */
+.dsrc-badge--no-icon .dsrc-badge__icon {
+  display: none;
+}
+
+
+/* ============================================
+ * 6. Badge group
+ *
+ *  <ul class="dsrc-badges-group">
+ *    <li><p class="dsrc-badge dsrc-badge--success">Valide</p></li>
+ *    <li><p class="dsrc-badge dsrc-badge--info">En cours</p></li>
+ *  </ul>
+ * ============================================ */
+
+.dsrc-badges-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsrc-spacing-2);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.dsrc-badges-group li {
+  list-style: none;
+  display: flex;
+}

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,235 @@
+/**
+ * DSRC Breadcrumb Component
+ * Design Systeme de la Republique du Cameroun
+ *
+ * Architecture alignee sur le DSFR : les separateurs sont generes
+ * en CSS via ::before (pas de <span> dans le HTML), et le fil
+ * d'Ariane est collapsible sur mobile.
+ *
+ * Structure HTML :
+ *
+ *   <nav class="dsrc-breadcrumb" role="navigation" aria-label="Vous etes ici :">
+ *     <button class="dsrc-breadcrumb__btn" aria-expanded="false" aria-controls="breadcrumb-list">
+ *       Voir le fil d'Ariane
+ *     </button>
+ *     <div class="dsrc-collapse" id="breadcrumb-list">
+ *       <ol class="dsrc-breadcrumb__list">
+ *         <li class="dsrc-breadcrumb__item">
+ *           <a class="dsrc-breadcrumb__link" href="/">Accueil</a>
+ *         </li>
+ *         <li class="dsrc-breadcrumb__item">
+ *           <a class="dsrc-breadcrumb__link" href="/services">Services</a>
+ *         </li>
+ *         <li class="dsrc-breadcrumb__item" aria-current="page">
+ *           Cadastre
+ *         </li>
+ *       </ol>
+ *     </div>
+ *   </nav>
+ *
+ * Sur desktop le .dsrc-collapse est toujours visible.
+ * Sur mobile il est masque et le bouton le deplie.
+ */
+
+
+/* ==========================================================================
+   1. CONTAINER
+   ========================================================================== */
+
+.dsrc-breadcrumb {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  padding: var(--dsrc-spacing-2) 0;
+}
+
+
+/* ==========================================================================
+   2. MOBILE TOGGLE BUTTON
+   Masque sur desktop, visible sur mobile.
+   ========================================================================== */
+
+.dsrc-breadcrumb__btn {
+  display: none;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-primaire);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.dsrc-breadcrumb__btn:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+  border-radius: var(--dsrc-radius-small);
+}
+
+/* Chevron */
+.dsrc-breadcrumb__btn::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-right: var(--dsrc-border-width-default) solid currentColor;
+  border-bottom: var(--dsrc-border-width-default) solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-breadcrumb__btn[aria-expanded="true"]::before {
+  transform: rotate(-135deg);
+}
+
+
+/* ==========================================================================
+   3. LIST
+   ========================================================================== */
+
+.dsrc-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+
+/* ==========================================================================
+   4. ITEMS
+   ========================================================================== */
+
+.dsrc-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  color: var(--dsrc-color-gris-600);
+}
+
+/* CSS-generated separator — no HTML needed */
+.dsrc-breadcrumb__item:not(:first-child)::before {
+  content: '';
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin: 0 var(--dsrc-spacing-2);
+  background-color: var(--dsrc-color-gris-400);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M5 2l5 5-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M5 2l5 5-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+/* Current page (last item) */
+.dsrc-breadcrumb__item[aria-current="page"] {
+  color: var(--dsrc-color-gris-600);
+  font-weight: var(--dsrc-font-weight-regular);
+}
+
+
+/* ==========================================================================
+   5. LINKS
+   ========================================================================== */
+
+.dsrc-breadcrumb__link {
+  color: var(--dsrc-color-primaire);
+  text-decoration: none;
+}
+
+.dsrc-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+
+.dsrc-breadcrumb__link:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+  border-radius: var(--dsrc-radius-small);
+}
+
+
+/* ==========================================================================
+   6. MOBILE RESPONSIVE
+   On mobile: show toggle button, hide breadcrumb via collapse.
+   ========================================================================== */
+
+@media (max-width: 767px) {
+  .dsrc-breadcrumb__btn {
+    display: inline-flex;
+  }
+
+  /* On mobile, the collapse wraps the list.
+     On desktop the collapse is always visible regardless of class. */
+  .dsrc-breadcrumb .dsrc-collapse {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--dsrc-transition-duration-normal) ease;
+  }
+
+  .dsrc-breadcrumb .dsrc-collapse--expanded {
+    max-height: 500px;
+  }
+
+  .dsrc-breadcrumb__list {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  }
+
+  .dsrc-breadcrumb__item:not(:first-child)::before {
+    margin: 0 var(--dsrc-spacing-1);
+  }
+}
+
+/* On desktop: always show collapse content */
+@media (min-width: 768px) {
+  .dsrc-breadcrumb .dsrc-collapse {
+    max-height: none !important;
+    overflow: visible;
+  }
+}
+
+
+/* ==========================================================================
+   7. HIGH CONTRAST (forced-colors)
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  .dsrc-breadcrumb__item:not(:first-child)::before {
+    background-color: ButtonText;
+  }
+
+  .dsrc-breadcrumb__link {
+    color: LinkText;
+  }
+
+  .dsrc-breadcrumb__link:focus-visible {
+    outline: 2px solid Highlight;
+  }
+
+  .dsrc-breadcrumb__btn::before {
+    border-right-color: LinkText;
+    border-bottom-color: LinkText;
+  }
+}
+
+
+/* ==========================================================================
+   8. REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-breadcrumb__btn::before {
+    transition: none;
+  }
+
+  .dsrc-breadcrumb .dsrc-collapse {
+    transition: none;
+  }
+}