feat(dsfr): start

.talismanrc

@@ -17,6 +17,10 @@ fileignoreconfig:
   checksum: e2d06e63d58935b349f2591b0a3c407c254be26c4e833456829e7c605fc7411b
 - filename: packages/backend/src/_migrations/_init-db/domifa_test_schema.sql
   checksum: 8b421c413bab4f2419972dec548a5399879f497a8c75c9b240bbf8c123cfab06
+- filename: packages/frontend/src/app/modules/general/components/static-pages/politique/politique.component.html
+  checksum: b4b98ac83a35a960edeb96d560203a9afbcc2d68d01c6289c2b316c36e5cdc80
+- filename: packages/frontend/src/app/modules/general/components/static-pages/politique/politique.component.ts
+  checksum: 94dd1d6db6c4ed1876bca5b077543693ee240e221ba32fab45885ed5b91e9f70
 - filename: packages/portail-admins/src/app/modules/admin-structures/components/admin-structures-list/admin-structures-list.component.spec.ts
   checksum: 8f66091255109d0da277819584c6c69d4a7f720256842851a49b0dda16af6651
 - filename: packages/portail-admins/src/app/modules/admin-structures/components/admin-structures-list/admin-structures-list.component.ts
@@ -30,6 +34,6 @@ fileignoreconfig:
 - filename: packages/portail-admins/src/app/modules/admin-structures/utils/structure-filter-criteria.ts
   checksum: c54f1bf45a44280960869561243668e7a92713fb5265f008a95fc3fe66014bf1
 - filename: yarn.lock
-  checksum: 075be99c7d081e6dc58ad5b0a0382963b392355221e5f8cf7f18bdcab8dae794
+  checksum: b804c4c48ab231f0323f86a499a469690cb41ef47d7434b54130e50e5aa54923
 threshold: medium
 version: "1.0"

packages/frontend/angular.json

@@ -17,20 +17,29 @@
             "outputPath": "dist/domifa",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js", "@angular/localize/init"],
+            "polyfills": [
+              "zone.js",
+              "@angular/localize/init"
+            ],
             "tsConfig": "./tsconfig.app.json",
-            "assets": ["src/assets", "src/robots.txt"],
+            "assets": [
+              "src/assets",
+              "src/robots.txt"
+            ],
             "styles": [
               "src/styles.scss",
-              "src/assets/css/bootstrap-custom.css",
+              "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.main.min.css",
+              "./node_modules/@gouvfr/dsfr/dist/utility/utility.main.min.css",
+              "src/assets/css/bootstrap-custom.scss",
               "src/assets/css/forms.scss",
-              "src/assets/css/fonts.css",
               "src/assets/css/main.scss",
               "src/assets/css/print.css",
               "src/assets/css/icons.css",
               "node_modules/intl-tel-input/build/css/intlTelInput.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"
+            ],
             "aot": false,
             "vendorChunk": true,
             "extractLicenses": false,
@@ -111,14 +120,19 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
     "packageManager": "yarn",
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
-}
+}

packages/frontend/jest.config.js

@@ -7,4 +7,7 @@ module.exports = {
     "^assets/(.*)$": "<rootDir>/src/assets/$1",
     "^environments/(.*)$": "<rootDir>/src/environments/$1",
   },
+  transformIgnorePatterns: [
+    "node_modules/(?!.*\\.mjs$|uuid|@edugouvfr/ngx-dsfr)",
+  ],
 };

packages/frontend/package.json

@@ -30,6 +30,7 @@
     "@ckeditor/ckeditor5-angular": "^9.0.0",
     "@ckeditor/ckeditor5-build-classic": "^43.3.1",
     "@domifa/common": "workspace:^",
+    "@edugouvfr/ngx-dsfr": "^1.14.3",
     "@fortawesome/angular-fontawesome": "0.15.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",

packages/frontend/src/app/app.component.html

@@ -1,246 +1,69 @@
 <app-custom-toastr></app-custom-toastr>
 <app-loading></app-loading>
 <app-idle-manager></app-idle-manager>
-<nav id="skip-links" role="navigation" aria-label="Accès rapide">
-  <ul>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="navigation"
-        >Aller à la navigation</a
-      >
-    </li>
-    <li>
-      <a ariaCurrentWhenActive="page" [routerLink]="currentUrl" fragment="page"
-        >Aller au contenu</a
-      >
-    </li>
-    <li *ngIf="currentUrl === '/manage'">
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="search-bar"
-        >Aller à la recherche</a
-      >
-    </li>
-    <li>
-      <a
-        ariaCurrentWhenActive="page"
-        [routerLink]="currentUrl"
-        fragment="footer"
-        >Aller au pied de page</a
-      >
-    </li>
-  </ul>
-</nav>
+<dsfr-skiplinks [links]="skipLinks"></dsfr-skiplinks>
 <app-help-modal></app-help-modal>
 
 <app-navbar [pendingNews]="pendingNews" [me]="me"></app-navbar>
 
 <main role="main" id="page">
   <router-outlet></router-outlet>
 </main>
-<footer id="footer" role="contentinfo" class="d-print-none">
-  <div class="bg-light py-3 border-bottom-dark">
-    <div class="container my-2 py-3">
-      <div class="row">
-        <div class="col my-2">
-          <p class="fw-bold">En savoir plus</p>
-          <ul>
-            <li>
-              <a routerLink="/news" ariaCurrentWhenActive="page">Nouveautés</a>
-            </li>
-            <li>
-              <a routerLink="/stats" ariaCurrentWhenActive="page"
-                >Statistiques</a
-              >
-            </li>
-
-            <li>
-              <a routerLink="/stats/impact" ariaCurrentWhenActive="page"
-                >Notre impact</a
-              >
-            </li>
-
-            <li>
-              <a routerLink="/faq" ariaCurrentWhenActive="page"
-                >Foire aux questions</a
-              >
-            </li>
-
-            <li>
-              <a routerLink="/contact" ariaCurrentWhenActive="page"
-                >Contactez-nous</a
-              >
-            </li>
-            <li>
-              <a routerLink="/portail-mon-domifa" ariaCurrentWhenActive="page"
-                >Portail Mon DomiFa</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="col my-2">
-          <p class="fw-bold">Cadre juridique</p>
-          <ul>
-            <li>
-              <a routerLink="/accessibilite"
-                >Accessibilité: partiellement conforme
-              </a>
-            </li>
-
-            <li>
-              <a ariaCurrentWhenActive="page" routerLink="/mentions-legales"
-                >Mentions légales</a
-              >
-            </li>
-
-            <li>
-              <a routerLink="/cgu" ariaCurrentWhenActive="page"
-                >Conditions générales d'utilisation</a
-              >
-            </li>
-            <li>
-              <a routerLink="/confidentialite" ariaCurrentWhenActive="page"
-                >Politique de confidentialité</a
-              >
-            </li>
-            <li>
-              <a routerLink="/plan-site" ariaCurrentWhenActive="page"
-                >Plan du site</a
-              >
-            </li>
-          </ul>
-        </div>
-
-        <div class="col my-2">
-          <p class="fw-bold">Nos partenaires</p>
-          <ul>
-            <li *ngFor="let link of partnerLinks">
-              <a [href]="link.path" target="_blank" rel="noopener noreferrer">
-                {{ link.label }}
-                <fa-icon
-                  class="ms-2"
-                  [icon]="['fas', 'up-right-from-square']"
-                  aria-hidden="true"
-                ></fa-icon>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="container my-2 py-3">
-    <div class="row align-items-center">
-      <div class="col-12 col-md-4">
-        <a
-          id="logo-footer"
-          href="https://solidarites.gouv.fr/"
-          target="_blank"
-          rel="noopener noreferrer"
-          title="Ministère du Travail, de la Santé, des Solidarités et des familles"
-        >
-          <img
-            rel="noopener noreferrer"
-            src="/assets/images/logo-ministere.jpg"
-            alt="Ministère du Travail, de la Santé, des Solidarités et des familles"
-          />
-        </a>
-      </div>
-      <div class="col-12 col-md-8">
-        <ul
-          data-component-id="footer"
-          class="content-list"
-          id="menu-footer-external"
-        >
-          <li class="content-item">
-            <a
-              href="https://www.info.gouv.fr/"
-              target="_blank"
-              class="content-link"
-              rel="noopener external"
-              title="info.gouv.fr - nouvelle fenêtre"
-              >info.gouv.fr
-              <fa-icon
-                aria-hidden="true"
-                [icon]="['fas', 'external-link-alt']"
-              ></fa-icon>
-            </a>
-          </li>
-          <li class="content-item">
-            <a
-              href="https://www.service-public.fr/"
-              target="_blank"
-              class="content-link"
-              rel="noopener external"
-              title="service-public.fr - nouvelle fenêtre"
-              >service-public.fr
-              <fa-icon
-                aria-hidden="true"
-                [icon]="['fas', 'external-link-alt']"
-              ></fa-icon
-            ></a>
-          </li>
-          <li class="content-item">
-            <a
-              href="https://www.legifrance.gouv.fr/"
-              target="_blank"
-              class="content-link"
-              rel="noopener external"
-              title="legifrance.gouv.fr - nouvelle fenêtre"
-              >legifrance.gouv.fr
-              <fa-icon
-                aria-hidden="true"
-                [icon]="['fas', 'external-link-alt']"
-              ></fa-icon
-            ></a>
-          </li>
-          <li class="content-item">
-            <a
-              href="https://www.data.gouv.fr/fr/"
-              target="_blank"
-              class="content-link"
-              rel="noopener external"
-              title="data.gouv.fr - nouvelle fenêtre"
-              >data.gouv.fr
-              <fa-icon
-                aria-hidden="true"
-                [icon]="['fas', 'external-link-alt']"
-              ></fa-icon
-            ></a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="bg-light border-top-dark">
-    <div class="container my-2 py-4">
-      <p>
-        DomiFa est une solution gratuite et complète de gestion des
-        domiciliations pour les structures domiciliataires (centres d'Action
-        Sociale, communes, organismes agréés).
-      </p>
-
-      <p>
-        Sauf mention contraire, tous les textes de ce site sont sous
-        <a
-          href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
-          target="_blank"
-          rel="noopener noreferrer"
-          >licence etalab-2.0
-          <fa-icon
-            class="ms-2"
-            [icon]="['fas', 'up-right-from-square']"
-            aria-hidden="true"
-          ></fa-icon
-        ></a>
-      </p>
-    </div>
-  </div>
-</footer>
-
+<dsfr-footer
+  [logo]="{ label: 'République<br>Française', link: '', tooltipMessage: '' }"
+  [institutionalLinks]="[
+    {
+      label: 'info.gouv.fr',
+      link: 'https://info.gouv.fr',
+      tooltipMessage: 'info.gouv.fr',
+      linkTarget: '_blank'
+    },
+    {
+      label: 'service-public.fr',
+      link: 'https://service-public.fr',
+      tooltipMessage: 'service-public.fr',
+      linkTarget: '_blank'
+    },
+    {
+      label: 'legifrance.gouv.fr',
+      link: 'https://legifrance.gouv.fr',
+      tooltipMessage: 'legifrance.gouv.fr',
+      linkTarget: '_blank'
+    },
+    {
+      label: 'data.gouv.fr',
+      link: 'https://data.gouv.fr',
+      tooltipMessage: 'data.gouv.fr',
+      linkTarget: '_blank'
+    }
+  ]"
+  [mandatoryLinks]="[
+    {
+      label: 'Accessibilité : partiellement conforme',
+      link: '/accessibilite',
+    },
+    { label: 'Mentions légales', link: '/mentions-legales' },
+    {
+      label: 'Conditions générales d’utilisation',
+      link: '/cgu',
+    },
+    {
+      label: 'Politique de confidentialité',
+      link: '/confidentialite',
+    },
+    {
+      label: 'Plan du site',
+      link: '/plan-site',
+    },
+    {
+      label: 'Nos partenaires',
+      link: '#',
+    }
+  ]"
+  license="Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous  <a href='https://github.com/etalab/licence-ouverte/blob/master/LO.md' target='_blank'>licence etalab-2.0</a>"
+  [accessibility]="'none'"
+>
+</dsfr-footer>
 <ng-template #acceptTermsModal let-modal>
   <div class="modal-header">
     <span id="modal-title">Veuillez lire et accepter les CGU</span>