feat: modifications footer

config-yml/commons/footer.yml

@@ -1,31 +1,23 @@
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-menuList:
-  - name: google.fr
-    url: https://google.fr/
+liensGouv:
+  - name: legifrance.gouv.fr
+    url: https://legifrance.gouv.fr
 
-#importer les images dans public/assets/imgs/sponsors
-principalSponsor:
-  - image: logo fabrique.png
-    url: https://www.fabrique.social.gouv.fr/
+  - name: gouvernement.fr
+    url: https://gouvernement.fr
 
-sponsors:
-  - image: Logo ARSNA.png
-    url: https://www.nouvelle-aquitaine.ars.sante.fr/
+  - name: service-public.fr
+    url: https://service-public.fr
 
-  - image: logo ARSIDF.jpeg
-    url: https://www.iledefrance.ars.sante.fr/
-
-  - image: logo-arsguy.jpeg
-    url: https://www.guyane.ars.sante.fr/
+  - name: data.gouv.fr
+    url: "https://data.gouv.fr"
 
 bottomMenuList:
   - name: Mentions légales
     slug: mentions-legales
 
-  - name: Données personnelles et cookies
-    slug: donnees-personnelles
-
-  - name: Accessibilité
-    slug: accessibilite
+  - name: Politique de confidentialité
+    slug: politique-confidentialite
 
-copyright: © République Française 2021
+laFabrique: La Fabrique Numérique des Ministères Sociaux
+republiqueFrancaise: République Française
+licence: Sauf mention contraire, tous les textes de ce site sont sous

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "repository": "",
   "dependencies": {
+    "@dataesr/react-dsfr": "^1.0.2",
     "@socialgouv/matomo-next": "^1.2.2",
     "axios": "^0.21.4",
     "bootstrap": "^4.6.1",
@@ -50,4 +51,4 @@
       "@socialgouv/eslint-config-react"
     ]
   }
-}
+}

src/components/Footer.js

@@ -1,122 +1,47 @@
+import {
+  Footer as FooterDsfr,
+  FooterBody,
+  FooterBodyItem,
+  FooterBottom,
+  FooterCopy,
+  FooterLink,
+  Logo,
+} from "@dataesr/react-dsfr";
 import Link from "next/link";
 import React from "react";
-import { Col, Row } from "react-bootstrap";
 
 import footer from "../../config-yml/commons/footer.yml";
 
-const LightLink = ({ href, children }) => (
-  <Link href={href} passHref>
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      style={{
-        color: "var(--primary)",
-        fontWeight: "700",
-      }}
-    >
-      {children}
-    </a>
-  </Link>
-);
-
-const Separator = () => <span className="px-2 text-lightergray"> | </span>;
 export function Footer() {
   return (
-    <footer style={{ marginTop: "100px" }}>
-      <div className="container">
-        <Col className="p-0">
-          <Row className="w-100 justify-content-between align-items-center no-gutters">
-            <Col xs={6} md={2}>
-              <img
-                src={"/assets/imgs/marianne.svg"}
-                alt="marianne-logo"
-                width="55"
-                height="auto"
-                className="mb-4"
-              />
-              <p className="font-weight-bold text-uppercase mb-2">Ministère des solidarités et de la santé</p>
-              <img
-                src={"/assets/imgs/devises.svg"}
-                alt="marianne-logo"
-                width="52"
-                height="auto"
-              />
-            </Col>
-            <Col xs={12} md={6}>
-              <div className="pb-4 pt-2 pt-md-0" style={{ fontSize: "13px" }}>
-                {footer.description}
-              </div>
-              <ul className="list-inline">
-                {footer.menuList.map((item, index) => (
-                  <li className="list-inline-item pr-2" key={index}>
-                    <LightLink href={item.url}>{item.name}</LightLink>
-                  </li>
-                ))}
-              </ul>
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <hr />
-            </Col>
-          </Row>
-          <Row className="w-100 justify-content-between align-items-end no-gutters">
-            <Col xs={12} md={2}>
-              <div
-                className="pb-1 small-title"
-                style={{ color: "var(--darkgray)" }}
-              >
-                Nos partenaires:
-              </div>
-              <img
-                src={
-                  "/assets/imgs/sponsors/" + footer.principalSponsor[0].image
-                }
-                alt="sponsor"
-                width="162px"
-              />
-            </Col>
-            <Col
-              xs={12}
-              md={8}
-              className="justify-content-md-end d-flex flex-wrap"
-            >
-              {footer.sponsors.map((item, index) => (
-                <LightLink key={index} href={item.url}>
-                  <img
-                    className="ml-md-2"
-                    src={"/assets/imgs/sponsors/" + item.image}
-                    alt="sponsor"
-                    width="162px"
-                  />
-                </LightLink>
-              ))}
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <hr />
-            </Col>
-          </Row>
-          <Row
-            className="justify-content-between w-100 pb-2 no-gutters"
-            style={{ fontSize: "12px", color: "var(--lightgray)" }}
+    <FooterDsfr>
+      <FooterBody description={footer.laFabrique}>
+        <Logo>{footer.republiqueFrancaise}</Logo>
+        {footer.liensGouv.map((item, index) => (
+          <FooterBodyItem KEY={index}>
+            <Link href={item.url}>{item.name}</Link>
+          </FooterBodyItem>
+        ))}
+      </FooterBody>
+
+      <FooterBottom>
+        {footer.bottomMenuList.map((item, index) => (
+          <FooterLink key={index} href={item.slug}>
+            {item.name}
+          </FooterLink>
+        ))}
+        <FooterCopy>
+          {footer.licence}{" "}
+          <a
+            href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+            target="_blank"
+            rel="noreferrer"
+            style={{ fontSize: "initial" }}
           >
-            <ul className="list-inline">
-              {footer.bottomMenuList.map((item, index) => (
-                <li className="list-inline-item" key={index}>
-                  <a href={item.slug} style={{ color: "var(--lightgray)" }}>
-                    {item.name}
-                  </a>
-                  <Separator />
-                </li>
-              ))}
-            </ul>
-            <div>{footer.copyright}</div>
-          </Row>
-        </Col>
-      </div>
-    </footer>
+            licence etalab-2.0
+          </a>
+        </FooterCopy>
+      </FooterBottom>
+    </FooterDsfr>
   );
 }