front end

design-system/primitives/DsMedia.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="ds-media" :class="`ds-media--${ratio}`">
+  <div class="ds-media" :class="[`ds-media--${ratio}`]">
     <img
       class="ds-media__img"
+      :class="[`ds-media__img--${fit}`]"
       :src="src"
       :alt="alt"
       loading="lazy"
@@ -14,25 +15,29 @@
   defineProps({
     src: { type: String, required: true },
     alt: { type: String, default: '' },
+    fit: { type: String, default: 'cover' },
     ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
   })
 </script>
 
 <style lang="scss">
-.ds-media {
-  width: 100%;
-  background: rgba(0,0,0,0.04);
-  overflow: hidden;
-  &--16-9 { aspect-ratio: 16 / 9; }
-  &--4-3 { aspect-ratio: 4 / 3; }
-  &--3-4 { aspect-ratio: 3 / 4; }
-  &--square { aspect-ratio: 1 / 1; }
-
-  .ds-media__img {
+  .ds-media {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
+    background: rgba(0,0,0,0.04);
+    overflow: hidden;
+    &--16-9 { aspect-ratio: 16 / 9; }
+    &--4-3 { aspect-ratio: 4 / 3; }
+    &--3-4 { aspect-ratio: 3 / 4; }
+    &--square { aspect-ratio: 1 / 1; }
+
+    .ds-media__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+        &--cover { object-fit:cover; }
+        &--contain { object-fit:contain; }
+    }
   }
-}
-</style>
+
+</style>

design-system/primitives/DsText.vue

@@ -8,6 +8,7 @@
       `ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
       `ds-text--${props.spacing || resolvedspacing}`,
       `ds-text--${props.tone}`,
+      `ds-text--${props.align}`,
       props.clamp ? `ds-text--clamp_${props.clamp}` : '',
     ]"
   >
@@ -25,6 +26,7 @@
     spacing: { type: String, default: '' },
     tone: { type: String, default: 'default' },         // default/muted/invert
     weight: { type: String, default: 'regular' },       // regular/medium
+    align: { type: String, default: '' },
     clamp: { type: Number, default: undefined },                // nombre de lignes du contenu
   })
 
@@ -113,6 +115,10 @@
     &--bleu_fonce { color: var(--c-bleu_fonce); }
     &--bleu_clair { color: var(--c-bleu_clair); }
 
+    &--justify {
+      text-align: justify;
+    }
+
     // clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
     // Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
     &--clamp_3 {