@dsrc-cm/core 0.1.0

package/src/components/notice/notice.css

@@ -0,0 +1,211 @@
+/**
+ * DSRC Notice Component
+ * Bandeau d'information pleine largeur (haut de page)
+ *
+ * Aligne sur les patrons du DSFR (fr-notice) adaptes pour le DSRC.
+ * - Bandeau pleine largeur sous le header
+ * - Conteneur interne centre avec max-width
+ * - Variantes : defaut (primaire/vert), --info, --warning, --error
+ * - Fermable via .dsrc-btn.dsrc-btn--close
+ * - Icone via pseudo-element
+ *
+ * Markup:
+ *
+ *   <div class="dsrc-notice" role="status">
+ *     <div class="dsrc-notice__inner">
+ *       <p class="dsrc-notice__title">
+ *         <span class="dsrc-notice__icon" aria-hidden="true"></span>
+ *         Information importante : le service sera indisponible le 25 fevrier.
+ *       </p>
+ *       <button type="button" class="dsrc-btn dsrc-btn--close" title="Masquer le message">
+ *         Masquer
+ *       </button>
+ *     </div>
+ *   </div>
+ *
+ *   <!-- Warning variant -->
+ *   <div class="dsrc-notice dsrc-notice--warning" role="status">
+ *     <div class="dsrc-notice__inner">
+ *       <p class="dsrc-notice__title">
+ *         <span class="dsrc-notice__icon" aria-hidden="true"></span>
+ *         Attention : des travaux de maintenance sont prevus.
+ *       </p>
+ *       <button type="button" class="dsrc-btn dsrc-btn--close" title="Masquer le message">
+ *         Masquer
+ *       </button>
+ *     </div>
+ *   </div>
+ */
+
+/* ============================================
+ * 1. Base - full-width banner
+ * ============================================ */
+
+.dsrc-notice {
+  display: block;
+  width: 100%;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  line-height: var(--dsrc-font-line-height-normal);
+  position: relative;
+
+  /* Default: primary green (Cameroon brand) */
+  background-color: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-blanc);
+}
+
+/* ============================================
+ * 2. Inner container - centered, max-width
+ * ============================================ */
+
+.dsrc-notice__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dsrc-spacing-4);
+  max-width: var(--dsrc-layout-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-5);
+  position: relative;
+}
+
+/* ============================================
+ * 3. Title (the main notice text)
+ * ============================================ */
+
+.dsrc-notice__title {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  margin: 0;
+  flex: 1;
+  text-align: center;
+  justify-content: center;
+}
+
+/* ============================================
+ * 4. Icon (inline span, styled via ::before)
+ *    The icon is an inline "info" circle rendered
+ *    with a data URI SVG. The SVG uses white fill
+ *    by default and is overridden per variant.
+ * ============================================ */
+
+.dsrc-notice__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* Info circle icon - white fill for default/dark backgrounds */
+.dsrc-notice__icon::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  background-color: currentColor;
+}
+
+/* ============================================
+ * 5. Links inside notice
+ * ============================================ */
+
+.dsrc-notice a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.dsrc-notice a:hover {
+  opacity: 0.85;
+}
+
+/* ============================================
+ * 6. Close button integration
+ *    Uses .dsrc-btn.dsrc-btn--close from button.css
+ *    The close button inherits white color from the
+ *    notice on dark backgrounds.
+ * ============================================ */
+
+.dsrc-notice > .dsrc-notice__inner > .dsrc-btn--close {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.dsrc-notice > .dsrc-notice__inner > .dsrc-btn--close:focus-visible {
+  outline-color: var(--dsrc-color-blanc);
+}
+
+/* ============================================
+ * 7. Type variants
+ * ============================================ */
+
+/* --- Info (blue) --- */
+.dsrc-notice--info {
+  background-color: var(--dsrc-color-info-bordure);
+  color: var(--dsrc-color-blanc);
+}
+
+/* --- Warning (orange) --- */
+.dsrc-notice--warning {
+  background-color: var(--dsrc-color-alerte-bordure);
+  color: var(--dsrc-color-blanc);
+}
+
+/* --- Error (red) --- */
+.dsrc-notice--error {
+  background-color: var(--dsrc-color-erreur-bordure);
+  color: var(--dsrc-color-blanc);
+}
+
+/* ============================================
+ * 8. Hidden state
+ *    When dismissed (JS sets aria-hidden="true")
+ * ============================================ */
+
+.dsrc-notice[aria-hidden="true"] {
+  display: none;
+}
+
+
+/* ============================================
+ * 9. Compact variant (--sm)
+ * ============================================ */
+
+.dsrc-notice--sm .dsrc-notice__inner {
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+}
+
+.dsrc-notice--sm .dsrc-notice__text {
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-notice--sm .dsrc-notice__icon {
+  font-size: var(--dsrc-font-size-body);
+}
+
+
+/* ============================================
+ * 10. Responsive mobile
+ * ============================================ */
+
+@media (max-width: 767px) {
+  .dsrc-notice__inner {
+    padding: var(--dsrc-spacing-3) var(--dsrc-spacing-3);
+  }
+
+  .dsrc-notice__text {
+    font-size: var(--dsrc-font-size-caption);
+  }
+}

package/src/components/pagination/pagination.css

@@ -0,0 +1,132 @@
+/**
+ * DSRC Pagination Component
+ *
+ * Usage:
+ * <nav class="dsrc-pagination" aria-label="Pagination">
+ *   <a class="dsrc-pagination__link dsrc-pagination__link--prev" href="#">Precedent</a>
+ *   <a class="dsrc-pagination__link" href="#">1</a>
+ *   <a class="dsrc-pagination__link dsrc-pagination__link--active" href="#" aria-current="page">2</a>
+ *   <a class="dsrc-pagination__link" href="#">3</a>
+ *   <span class="dsrc-pagination__ellipsis">...</span>
+ *   <a class="dsrc-pagination__link" href="#">12</a>
+ *   <a class="dsrc-pagination__link dsrc-pagination__link--next" href="#">Suivant</a>
+ * </nav>
+ */
+
+.dsrc-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-1);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+}
+
+.dsrc-pagination__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 var(--dsrc-spacing-2);
+  border: var(--dsrc-border-width-default) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  color: var(--dsrc-color-noir);
+  text-decoration: none;
+  font-weight: var(--dsrc-font-weight-medium);
+  transition: background-color 0.1s ease, border-color 0.1s ease;
+}
+
+.dsrc-pagination__link:hover {
+  background-color: var(--dsrc-color-gris-100);
+  border-color: var(--dsrc-color-gris-300);
+}
+
+.dsrc-pagination__link--active,
+.dsrc-pagination__link[aria-current="page"] {
+  background-color: var(--dsrc-color-primaire);
+  border-color: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-blanc);
+}
+
+.dsrc-pagination__link--disabled,
+.dsrc-pagination__link[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.dsrc-pagination__link:active {
+  background-color: var(--dsrc-color-gris-200);
+}
+
+.dsrc-pagination__link:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  color: var(--dsrc-color-gris-500);
+}
+
+
+/* ============================================
+ * Size variants
+ * ============================================ */
+
+.dsrc-pagination--sm .dsrc-pagination__link {
+  min-width: 28px;
+  height: 28px;
+  font-size: var(--dsrc-font-size-caption);
+  padding: 0 var(--dsrc-spacing-1);
+}
+
+.dsrc-pagination--sm .dsrc-pagination__ellipsis {
+  min-width: 28px;
+  height: 28px;
+}
+
+.dsrc-pagination--lg .dsrc-pagination__link {
+  min-width: 44px;
+  height: 44px;
+  font-size: var(--dsrc-font-size-body);
+  padding: 0 var(--dsrc-spacing-3);
+}
+
+.dsrc-pagination--lg .dsrc-pagination__ellipsis {
+  min-width: 44px;
+  height: 44px;
+}
+
+
+/* ============================================
+ * High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-pagination__link {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-pagination__link--active,
+  .dsrc-pagination__link[aria-current="page"] {
+    border: 2px solid Highlight;
+    color: Highlight;
+    background-color: Canvas;
+  }
+
+  .dsrc-pagination__link--disabled,
+  .dsrc-pagination__link[aria-disabled="true"] {
+    border-color: GrayText;
+    color: GrayText;
+    opacity: 1;
+  }
+
+  .dsrc-pagination__link:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}

package/src/components/password/password.css

@@ -0,0 +1,195 @@
+/**
+ * DSRC Password Component
+ *
+ * Wrapper around an input field with a "show/hide" checkbox toggle
+ * and an optional capslock indicator.
+ *
+ * Variants:
+ *   --error ...... Error state
+ *   --valid ...... Valid state
+ *
+ * Usage:
+ *   <div class="dsrc-password">
+ *     <label class="dsrc-label" for="pw">Mot de passe</label>
+ *     <div class="dsrc-password__checkbox">
+ *       <input type="checkbox" id="pw-show">
+ *       <label for="pw-show">Afficher</label>
+ *     </div>
+ *     <div class="dsrc-input-wrap">
+ *       <input type="password" id="pw" class="dsrc-password__input dsrc-input">
+ *     </div>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base password wrapper
+ * ============================================ */
+
+.dsrc-password {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: var(--dsrc-spacing-2);
+}
+
+.dsrc-password > .dsrc-label {
+  order: -1;
+  flex: 1;
+  min-width: 50%;
+}
+
+
+/* ============================================
+ * 2. Show/hide checkbox
+ * ============================================ */
+
+.dsrc-password__checkbox {
+  order: -1;
+  flex: 0;
+  align-self: flex-end;
+  margin-left: auto;
+  padding-left: var(--dsrc-spacing-2);
+}
+
+.dsrc-password__checkbox label {
+  white-space: nowrap;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-noir);
+  cursor: pointer;
+}
+
+
+/* ============================================
+ * 3. Input wrapper
+ * ============================================ */
+
+.dsrc-password .dsrc-input-wrap {
+  flex: 1 0 100%;
+}
+
+.dsrc-password__input {
+  width: 100%;
+  margin-bottom: var(--dsrc-spacing-3);
+}
+
+/* Hide native password reveal (Edge/Chrome) */
+.dsrc-password__input::-ms-reveal {
+  display: none;
+}
+
+.dsrc-password__input::-webkit-caps-lock-indicator {
+  content: none;
+}
+
+
+/* ============================================
+ * 4. Capslock indicator
+ * ============================================ */
+
+.dsrc-password[data-capslock]::after {
+  content: '';
+  position: absolute;
+  top: var(--dsrc-spacing-3);
+  right: var(--dsrc-spacing-4);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  background-color: var(--dsrc-color-gris-600);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 11h3v5h10v-5h3L12 2zm-1 16h2v2h-2v-2z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 11h3v5h10v-5h3L12 2zm-1 16h2v2h-2v-2z'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+
+/* ============================================
+ * 5. Validation states
+ * ============================================ */
+
+.dsrc-password--error {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-password--valid {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-password--error .dsrc-message {
+  color: var(--dsrc-color-erreur-texte);
+}
+
+.dsrc-password--valid .dsrc-message {
+  color: var(--dsrc-color-succes-texte);
+}
+
+
+/* ============================================
+ * 6. Strength indicator
+ * ============================================ */
+
+.dsrc-password__strength {
+  width: 100%;
+  display: flex;
+  gap: var(--dsrc-spacing-1);
+  margin-bottom: var(--dsrc-spacing-2);
+}
+
+.dsrc-password__strength-bar {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background-color: var(--dsrc-color-gris-200);
+}
+
+.dsrc-password[data-strength="1"] .dsrc-password__strength-bar:nth-child(1) {
+  background-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-password[data-strength="2"] .dsrc-password__strength-bar:nth-child(-n+2) {
+  background-color: var(--dsrc-color-avertissement-bordure);
+}
+
+.dsrc-password[data-strength="3"] .dsrc-password__strength-bar:nth-child(-n+3) {
+  background-color: var(--dsrc-color-info-bordure);
+}
+
+.dsrc-password[data-strength="4"] .dsrc-password__strength-bar {
+  background-color: var(--dsrc-color-succes-bordure);
+}
+
+
+/* ============================================
+ * 7. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-password[data-capslock]::after {
+    background-color: ButtonText;
+  }
+
+  .dsrc-password__strength-bar {
+    border: 1px solid ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 8. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-password__checkbox {
+    display: none;
+  }
+
+  .dsrc-password__strength {
+    display: none;
+  }
+}

package/src/components/quote/quote.css

@@ -0,0 +1,156 @@
+/**
+ * DSRC Quote Component
+ *
+ * Semantic <figure> + <blockquote> with author attribution.
+ *
+ * Variants:
+ *   --column ... Author image on the left (desktop)
+ *
+ * Usage:
+ *   <figure class="dsrc-quote">
+ *     <blockquote>
+ *       <p>« Citation mise en valeur. »</p>
+ *     </blockquote>
+ *     <figcaption>
+ *       <p class="dsrc-quote__author">Paul Biya</p>
+ *       <ul class="dsrc-quote__source">
+ *         <li>Discours</li>
+ *         <li>20 mai 2024</li>
+ *       </ul>
+ *     </figcaption>
+ *   </figure>
+ */
+
+
+/* ============================================
+ * 1. Base quote
+ * ============================================ */
+
+.dsrc-quote {
+  position: relative;
+  margin: 0;
+  padding: 0 var(--dsrc-spacing-2) var(--dsrc-spacing-8) var(--dsrc-spacing-2);
+  border-left: 4px solid var(--dsrc-color-primaire);
+}
+
+.dsrc-quote blockquote {
+  margin: 0;
+}
+
+.dsrc-quote blockquote p {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-xl);
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 0 var(--dsrc-spacing-4);
+}
+
+
+/* ============================================
+ * 2. Author & source
+ * ============================================ */
+
+.dsrc-quote__author {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 0 var(--dsrc-spacing-1);
+}
+
+.dsrc-quote__source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+.dsrc-quote__source li {
+  display: inline-block;
+}
+
+.dsrc-quote__source li:not(:last-child)::after {
+  content: '\00B7';
+  padding: 0 var(--dsrc-spacing-1);
+}
+
+.dsrc-quote__source cite {
+  font-style: italic;
+}
+
+
+/* ============================================
+ * 3. Author image
+ * ============================================ */
+
+.dsrc-quote__image {
+  width: 68px;
+  height: 68px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+}
+
+.dsrc-quote__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+/* ============================================
+ * 4. Column variant (image on the left)
+ * ============================================ */
+
+.dsrc-quote--column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+@media (min-width: 768px) {
+  .dsrc-quote--column {
+    margin-left: 100px;
+    min-height: 92px;
+  }
+
+  .dsrc-quote--column .dsrc-quote__image {
+    position: absolute;
+    top: 50%;
+    left: -100px;
+    width: 84px;
+    height: 84px;
+    margin-top: -42px;
+  }
+}
+
+
+/* ============================================
+ * 5. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-quote {
+    border-left: 4px solid ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 6. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-quote {
+    border-left: 2px solid var(--dsrc-color-gris-600);
+  }
+
+  .dsrc-quote__image {
+    display: none;
+  }
+}