MAJ du DSFR en 1.10.2 (#576)

* update dsfr to 1.10.2 * update fr-download components * update custom fr-radio components * update fr-tile components * remove tile style on home and first step * update node version in dockerfile
DISIC · Dec 6, 2023 · 473fae7 · 473fae7
1 parent b5f7af1
commit 473fae7
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 198 deletions.
diff --git a/confiture-web-app/Dockerfile b/confiture-web-app/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16 AS builder
+FROM node:18 AS builder
 ARG SENTRY_ORG
 ARG SENTRY_PROJECT
 ARG SENTRY_AUTH_TOKEN

diff --git a/confiture-web-app/package.json b/confiture-web-app/package.json
@@ -12,7 +12,7 @@
     "generate:rgaa": "node scripts/build-rgaa-files.js"
   },
   "dependencies": {
-    "@gouvfr/dsfr": "1.9.0",
+    "@gouvfr/dsfr": "1.10.2",
     "@sentry/tracing": "^7.37.2",
     "@sentry/vue": "^7.37.2",
     "@unhead/vue": "^1.5.3",

diff --git a/confiture-web-app/src/components/AuditTypeRadio.vue b/confiture-web-app/src/components/AuditTypeRadio.vue
@@ -14,7 +14,7 @@ defineEmits(["update:modelValue"]);
 </script>
 
 <template>
-  <div :class="['fr-p-3w fr-tile container', { checked: checked }]">
+  <div :class="['fr-p-3w wrapper', { checked: checked }]">
     <p
       class="fr-badge fr-badge--sm fr-mb-1w"
       :class="{ 'fr-badge--green-bourgeon': highlighted }"
@@ -50,22 +50,17 @@ defineEmits(["update:modelValue"]);
 </template>
 
 <style scoped>
-.container {
+.wrapper {
   flex-direction: column;
+  border: 1px solid var(--border-default-grey);
 }
 
-.container.checked {
+.wrapper.checked {
   --border-default-grey: var(--border-plain-blue-france);
 }
 
 .radio-input {
   /* When the browser scrolls to the required input from the bottom of the form, show the entire "radio block" */
   scroll-margin-top: 6rem;
 }
-
-.label::before {
-  /* Align radio to label. This label size for radio does not exist in DSFR. */
-  margin-top: 1rem !important;
-  margin-right: 0.75rem !important;
-}
 </style>
diff --git a/confiture-web-app/src/pages/HomePage.vue b/confiture-web-app/src/pages/HomePage.vue
@@ -107,13 +107,13 @@ const steps = [
     <h2 class="fr-h5">Quelles étapes m'attendent ?</h2>
     <div class="fr-grid-row fr-grid-row--gutters">
       <div v-for="step in steps" :key="step.title" class="fr-col">
-        <div class="fr-tile fr-tile--horizontal">
-          <div class="fr-tile__body step-content">
+        <div class="fr-p-4w step-wrapper">
+          <div class="step-content">
             <div class="step-icon" aria-hidden="true">{{ step.icon }}</div>
-            <h3 class="fr-tile__title">
+            <h3 class="fr-text--md step-title">
               {{ step.title }}
             </h3>
-            <p class="fr-tile__desc">{{ step.description }}</p>
+            <p class="fr-mb-0">{{ step.description }}</p>
           </div>
         </div>
       </div>
@@ -128,6 +128,11 @@ const steps = [
   gap: 1.5rem;
 }
 
+.step-wrapper {
+  border: 1px solid var(--border-default-grey);
+  height: 100%;
+}
+
 .step-content {
   display: grid;
   grid-template-columns: min-content 1fr;

diff --git a/confiture-web-app/src/pages/help/HelpPage.vue b/confiture-web-app/src/pages/help/HelpPage.vue
diff --git a/confiture-web-app/src/pages/resources/A11yIntroTrainingPage.vue b/confiture-web-app/src/pages/resources/A11yIntroTrainingPage.vue
@@ -21,13 +21,11 @@ import transcriptionUrl from "../../assets/Transcription-Accessibilite-18novembr
       ></iframe>
     </div>
 
-    <div class="fr-download fr-mb-6w">
-      <p>
-        <a :href="transcriptionUrl" download class="fr-download__link"
-          >Télécharger la transcription
-          <span class="fr-download__detail">DOCX (Word) – 44 Ko</span>
-        </a>
-      </p>
+    <div class="fr-mb-6w">
+      <a class="fr-link fr-link--download" download :href="transcriptionUrl">
+        Télécharger la transcription
+        <span class="fr-link__detail">DOCX (Word) – 44 Ko</span>
+      </a>
     </div>
     <h2>Informations</h2>
     <p><strong>Objectifs de la formation</strong> :</p>

diff --git a/confiture-web-app/src/pages/resources/PublicDigitalTrainingPage.vue b/confiture-web-app/src/pages/resources/PublicDigitalTrainingPage.vue
@@ -21,14 +21,13 @@ import transcriptionUrl from "../../assets/Transcription-Bienfairedunumerique-19
       ></iframe>
     </div>
 
-    <div class="fr-download fr-mb-6w">
-      <p>
-        <a :href="transcriptionUrl" download class="fr-download__link"
-          >Télécharger la transcription
-          <span class="fr-download__detail">DOCX (Word) – 51 Ko</span>
-        </a>
-      </p>
+    <div class="fr-mb-6w">
+      <a class="fr-link fr-link--download" download :href="transcriptionUrl">
+        Télécharger la transcription
+        <span class="fr-link__detail">DOCX (Word) – 51 Ko</span>
+      </a>
     </div>
+
     <h2>Informations</h2>
     <p>
       Lors de ce webinaire, nous vous présenterons les enseignements et les

diff --git a/confiture-web-app/yarn.lock b/confiture-web-app/yarn.lock
@@ -132,10 +132,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@gouvfr/dsfr@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.9.0.tgz#5d6b97328b8c239d0d4383708a5fa59fd5290e4c"
-  integrity sha512-CWckBrvCL28QV2K1+GK/AjW40aGHmd1oXnCSFRD4iRhsIgXkE/+t6pH24L+6BKVBCSYfp2RTGAgRwVN06PqGMw==
+"@gouvfr/dsfr@1.10.2":
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.10.2.tgz#364916777d6e2a54e991c9883d63516918759e20"
+  integrity sha512-twPj+VFMTOKUfI9vbBnK8fH1iDpXuDVWeMJzgmmQ5LKjRtZdUsvSbHNlp7HWcDvhWxDGNHxSboErC7UB3oskYQ==
 
 "@humanwhocodes/config-array@^0.11.6":
   version "0.11.8"