fetch main upstream volvo

Merge remote-tracking branch 'upstream/main'

blocks/vin-number/vin-number.css

@@ -57,15 +57,13 @@
 
 .vin-number__no-french-info {
   padding-top: 20px;
+  padding-bottom: 20px;
   color: var(--c-grey-800);
   font-family: var(--ff-volvo-novum-medium);
 }
 
-.vin-number__recalls-wrapper {
-  margin-top: 25px;
-}
-
 .vin-number__recalls-heading-wrapper {
+  margin-top: 25px;
   display: flex;
   align-items: center;
   gap: 16px;
@@ -110,6 +108,12 @@
   color: var(--c-leaf-4);
 }
 
+.vin-number__recalls-make-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 @media (min-width: 744px) {
   :root {
     --label-top: 3px;

blocks/vin-number/vin-number.js

@@ -71,8 +71,28 @@ function renderRecalls(recallsData) {
   let noFrenchInfo = false;
 
   const recallsOldestDate = isFrench ? new Date(recallsData.recalls_since).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' }) : recallsData.recalls_since;
+  const blockEl = document.querySelector(`.${blockName}__recalls-wrapper`);
+
+  const recallsMake = createElement('div', { classes: `${blockName}__recalls-make-wrapper` });
+  const makeFragment = docRange.createContextualFragment(`
+    <div class="${blockName}__recalls-model-year">
+      <span class="${blockName}__recalls-make subtitle-1">${getTextLabel('model year')}</span>
+      <span> ${recallsData.year}</span>
+    </div>
+    <div class="${blockName}__recalls-make">
+      <span class="${blockName}__recalls-make subtitle-1">${getTextLabel('make')}</span>
+      <span> ${recallsData.make}</span>
+    </div>
+    <div class="${blockName}__recalls-model">
+      <span class="${blockName}__recalls-model subtitle-1">${getTextLabel('model')}</span>
+      <span> ${recallsData.model}</span>
+    </div>
+  `);
+
+  recallsMake.append(...makeFragment.children);
+  blockEl.append(recallsMake);
+
   if (recallsData.recalls_available) {
-    const blockEl = document.querySelector(`.${blockName}__recalls-wrapper`);
     const listWrapperFragment = docRange.createContextualFragment(`
       <div class="${blockName}__recalls-heading-wrapper">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

placeholder.json

@@ -210,6 +210,18 @@
     {
       "Key": "view less",
       "Text": "View less"
+    },
+    {
+      "Key": "make",
+      "Text": "Make"
+    },
+    {
+      "Key": "model",
+      "Text": "Model"
+    },
+    {
+      "Key": "model year",
+      "Text": "Model year"
     }
   ],
   ":type": "sheet"