From 473fae7aff6e452aff3d44698f60840da3b4e43e Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 6 Dec 2023 14:15:23 +0100
Subject: [PATCH] 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
---
 confiture-web-app/Dockerfile                  |   2 +-
 confiture-web-app/package.json                |   2 +-
 .../src/components/AuditTypeRadio.vue         |  13 +-
 confiture-web-app/src/pages/HomePage.vue      |  13 +-
 confiture-web-app/src/pages/help/HelpPage.vue | 165 ------------------
 .../pages/resources/A11yIntroTrainingPage.vue |  12 +-
 .../resources/PublicDigitalTrainingPage.vue   |  13 +-
 confiture-web-app/yarn.lock                   |   8 +-
 8 files changed, 30 insertions(+), 198 deletions(-)
 delete mode 100644 confiture-web-app/src/pages/help/HelpPage.vue

diff --git a/confiture-web-app/Dockerfile b/confiture-web-app/Dockerfile
index 6eca36fc..f25b7517 100644
--- 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
index bfc96397..eeb1a801 100644
--- 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
index 9da2b7d0..5ae25ae4 100644
--- 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,11 +50,12 @@ 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);
 }
 
@@ -62,10 +63,4 @@ defineEmits(["update:modelValue"]);
   /* 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
index f94ff69b..b9b74ced 100644
--- 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
deleted file mode 100644
index 3e29eaad..00000000
--- a/confiture-web-app/src/pages/help/HelpPage.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import AfterReport from "../../components/FaqAccordionsContent/AfterReport.vue";
-import Prioritize from "../../components/FaqAccordionsContent/Prioritize.vue";
-import Test from "../../components/FaqAccordionsContent/Test.vue";
-import AfterCorrection from "../../components/FaqAccordionsContent/AfterCorrection.vue";
-import QuickWin from "../../components/FaqAccordionsContent/QuickWin.vue";
-import FullyAccessible from "../../components/FaqAccordionsContent/FullyAccessible.vue";
-import SelfAuditing from "../../components/FaqAccordionsContent/SelfAuditing.vue";
-import LegalRequirements from "../../components/FaqAccordionsContent/LegalRequirements.vue";
-import TeamTraining from "../../components/FaqAccordionsContent/TeamTraining.vue";
-import TopLink from "../../components/TopLink.vue";
-import PageMeta from "../../components/PageMeta";
-
-const accordions = [
-  {
-    title: "Que faire après avoir reçu mon rapport ?",
-    component: AfterReport,
-  },
-  {
-    title: "Comment prioriser les correctifs ?",
-    component: Prioritize,
-  },
-  {
-    title: "Comment tester mes correctifs ?",
-    component: Test,
-  },
-  {
-    title:
-      "Que faire après avoir corrigé les anomalies et testé les corrections ?",
-    component: AfterCorrection,
-  },
-  {
-    title: "Comment faire remonter rapidement le taux d’accessibilité ? ",
-    component: QuickWin,
-  },
-  {
-    title: "Comment être conforme à 100% ?",
-    component: FullyAccessible,
-  },
-  {
-    title: "Comment réaliser soi-même un audit accessibilité ? ",
-    component: SelfAuditing,
-  },
-  {
-    title: "Quelles sont les obligations légales ?",
-    component: LegalRequirements,
-  },
-  {
-    title: "Comment me former ou former mon équipe ?",
-    component: TeamTraining,
-  },
-];
-
-const tileLinks = [
-  {
-    title: "Les obligations légales",
-    routeName: "legal-requirements",
-  },
-  {
-    title: "Le RGAA",
-    routeName: "rgaa",
-  },
-  {
-    title: "La déclaration d’accessibilité",
-    routeName: "accessibility-statement",
-  },
-  {
-    title: "Le schéma pluriannuel",
-    routeName: "accessibility-plan",
-  },
-];
-
-const moreLinks = [
-  {
-    title: "DesignGouv",
-    description:
-      "notre site dédié au design et à l’accessibilité des services numériques",
-    href: "https://design.numerique.gouv.fr/",
-  },
-  {
-    title: "RGAA",
-    description:
-      "enjeux, tests, obligations légales, méthodes, tout le RGAA en plus clair",
-    href: "https://accessibilite.numerique.gouv.fr/",
-  },
-];
-</script>
-
-<template>
-  <PageMeta
-    title="Aide"
-    description="Obtenez des réponses à vos questions les plus fréquentes ou contactez l'équipe Design des services numériques."
-  />
-
-  <div class="fr-my-0 content">
-    <h1>Aide</h1>
-    <section>
-      <h2>Questions fréquentes</h2>
-      <div class="fr-accordions-group fr-mb-6w">
-        <section
-          v-for="(accordion, i) in accordions"
-          :key="accordion.title"
-          class="fr-accordion"
-        >
-          <h3 class="fr-accordion__title">
-            <button
-              class="fr-accordion__btn"
-              aria-expanded="false"
-              :aria-controls="`accordion-${i}`"
-            >
-              {{ accordion.title }}
-            </button>
-          </h3>
-          <div :id="`accordion-${i}`" class="fr-collapse">
-            <component :is="accordion.component" />
-          </div>
-        </section>
-      </div>
-    </section>
-    <section>
-      <h2>Comprendre</h2>
-      <p>
-        Vous débutez dans l’accessibilité numérique ? Vous maitrisez déjà le
-        sujet mais une piqure de rappel ne vous ferait pas de mal ?
-      </p>
-
-      <div class="fr-grid-row fr-grid-row--gutters fr-mb-7w">
-        <div
-          v-for="link in tileLinks"
-          :key="link.routeName"
-          class="fr-col-12 fr-col-md-6"
-        >
-          <div class="fr-tile fr-enlarge-link fr-tile--horizontal">
-            <div class="fr-h3 fr-tile__body">
-              <RouterLink
-                class="fr-tile__link"
-                :to="{ name: link.routeName }"
-                >{{ link.title }}</RouterLink
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <h2>Aller plus loin</h2>
-      <p>Retrouver plus d’informations sur les sites officiels&nbsp;:</p>
-
-      <ul class="fr-mb-7w">
-        <li v-for="link in moreLinks" :key="link.title">
-          <a class="fr-link" :href="link.href" target="_blank">
-            {{ link.title }} <span class="sr-only">(nouvelle fenêtre)</span>
-          </a>
-          : {{ link.description }}.
-        </li>
-      </ul>
-    </section>
-    <TopLink />
-  </div>
-</template>
-
-<style scoped>
-.content {
-  max-width: 49.5rem;
-}
-</style>
diff --git a/confiture-web-app/src/pages/resources/A11yIntroTrainingPage.vue b/confiture-web-app/src/pages/resources/A11yIntroTrainingPage.vue
index 756ac4cb..7a44cfe6 100644
--- 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
index 843df7d4..2699661b 100644
--- 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
index 98de0df6..d2f9ee12 100644
--- 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"