Release sprint 2 : version 1.6.4 (#304)

CHANGELOG.md

@@ -1,6 +1,39 @@
 
 # CHANGELOG
 
+
+## 1.6.4 (27/05/2023)
+
+* BSR - refactor MEP sprint 2
+
+## 1.6.3 (26/05/2023)
+
+* BSR - données agribalyse
+
+## 1.6.2 (26/05/2023)
+
+* BSR - amélioration de la déclaration d'accessibilité
+
+## 1.6.1 (22/05/2023)
+
+* U3 - retours correctifs
+
+## 1.6.0 (19/05/2023)
+
+* U9 - équivalences
+
+## 1.5.1 (16/05/2023)
+
+* BSR - corrections wording, retours U13
+
+## 1.5.0 (15/05/2023)
+
+* U3 - options dans le simulateur
+
+## 1.4.0 (14/05/2023)
+
+* U13 - impact à l'année
+
 ## 1.3.1 (12/05/2023)
 
 * U1, U2 - retours de recette

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "test": "playwright test",
-    "test:watch": "playwright test --ui",
+    "test:ui": "playwright test --ui",
     "dev": "next dev",
     "build": "yarn iframe && next build",
     "postbuild": "next-sitemap",
@@ -48,6 +48,7 @@
     "styled-normalize": "^8.0.7",
     "twemoji": "^14.0.2",
     "use-animate-number": "^1.0.5",
+    "use-local-storage": "^3.0.0",
     "use-query-params": "^2.2.0"
   },
   "devDependencies": {

pages/_app.js

@@ -1,26 +1,25 @@
-import { init } from '@socialgouv/matomo-next'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { NextAdapter } from 'next-query-params'
-import React, { useEffect, useState } from 'react'
-import { hotjar } from 'react-hotjar'
-import { QueryParamProvider } from 'use-query-params'
-
-import 'utils/fonts.css'
-import { GlobalStyle } from 'utils/styles'
-
-import { DataProvider } from 'components/providers/DataProvider'
-import { ModalProvider } from 'components/providers/ModalProvider'
-import { StyleProvider } from 'components/providers/StyleProvider'
+import { init } from "@socialgouv/matomo-next";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { DataProvider } from "components/providers/DataProvider";
+import { ModalProvider } from "components/providers/ModalProvider";
+import { StyleProvider } from "components/providers/StyleProvider";
+import { NextAdapter } from "next-query-params";
+import React, { useEffect, useState } from "react";
+import { hotjar } from "react-hotjar";
+import { QueryParamProvider } from "use-query-params";
+import "utils/augmenters";
+import "utils/fonts.css";
+import { GlobalStyle } from "utils/styles";
 
 function MyApp({ Component, pageProps }) {
-  const [queryClient] = useState(() => new QueryClient())
+  const [queryClient] = useState(() => new QueryClient());
 
   useEffect(() => {
-    if (process.env.NODE_ENV === 'production') {
-      init({ url: 'https://stats.data.gouv.fr', siteId: 156 })
+    if (process.env.NODE_ENV === "production") {
+      init({ url: "https://stats.data.gouv.fr", siteId: 156 });
     }
-    hotjar.initialize(3372162, 6)
-  }, [])
+    hotjar.initialize(3372162, 6);
+  }, []);
 
   return (
     <QueryParamProvider adapter={NextAdapter}>
@@ -35,7 +34,7 @@ function MyApp({ Component, pageProps }) {
         </StyleProvider>
       </QueryClientProvider>
     </QueryParamProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;

pages/accessibilite.js

@@ -0,0 +1,164 @@
+import Section2 from "components/base/Section2";
+import Web from "components/layout/Web";
+import React from "react";
+import styled from "styled-components";
+
+export default function Accessibilite() {
+  return (
+    <Web>
+      <Section2>
+        <Section2.InnerMargin>
+          <FormatText>
+            <h1>Déclaration d'accessibilité</h1>
+            <h2 id="quest-ce-que-laccessibilité-numérique-">Qu’est-ce que l’accessibilité numérique ?</h2>
+            <p>
+              Un site web accessible est un site qui permet à tous les internautes d’accéder à ses contenus sans
+              difficulté, y compris aux personnes qui présentent un handicap et utilisent des logiciels ou matériels
+              spécialisés.
+            </p>
+
+            <h2 id="politique-daccessibilité">Politique d’accessibilité</h2>
+            <p>
+              L’Agence de la transition écologique (ADEME) accorde une réelle importance à la qualité de réalisation et
+              à l’expérience utilisateur de ses services numériques et s’engage à rendre ses sites internet, intranet,
+              extranets accessibles conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.
+            </p>
+
+            <ul>
+              <li>
+                <a
+                  href="https://librairie.ademe.fr/institutionnel/4817-schema-pluriannuel-de-mise-en-accessibilite-des-sites-web-de-l-ademe-2021-2023.html"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  Schéma pluriannuel en cours
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://librairie.ademe.fr/institutionnel/6257-plan-annuel-de-mise-en-accessibilite-des-sites-web-de-l-ademe.html"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  Plan d’action de l’année en cours
+                </a>
+              </li>
+            </ul>
+
+            <p>
+              La présente déclaration d’accessibilité s’applique au site impactCO2 (https://impactco2.fr) dont toute
+              l’équipe de conception et de développement est impliquée dans une approche globale de l’accessibilité en
+              attendant l’accompagnement par des experts tiers dans le cadre d’un futur audit du site.
+            </p>
+
+            <h2 id="état-de-conformité">État de conformité</h2>
+
+            <p>
+              Le site ImpactCO2 est non conforme avec le Référentiel général d’amélioration de l’accessibilité, RGAA
+              version 4.1, car il n’existe aucun résultat d’audit en cours de validité permettant de mesurer le respect
+              de ces critères.
+            </p>
+
+            <h2 id="résultats-des-tests">Résultats des tests</h2>
+
+            <p>En l’absence d’audit de conformité il n’y a pas de résultats de tests.</p>
+
+            <h2 id="contenus-non-accessibles">Contenus non accessibles</h2>
+
+            <p>Les contenus listés ci-dessous ne sont pas accessibles pour les raisons suivantes.</p>
+
+            <p>
+              <strong>Non-conformité</strong>
+              <div>Néant</div>
+            </p>
+            <p>
+              <strong>Dérogations pour charge disproportionnée</strong>
+              <div>Néant</div>
+            </p>
+            <p>
+              <strong>Contenus non soumis à l’obligation d’accessibilité</strong>
+              <div>Néant</div>
+            </p>
+
+            <h2 id="établissement-de-cette-déclaration-daccessibilité">
+              Établissement de cette déclaration d’accessibilité
+            </h2>
+            <p>Cette déclaration a été établie le 26 juin 2023.</p>
+
+            <h3 id="technologies-utilisées-pour-la-réalisation-du-site">
+              Technologies utilisées pour la réalisation du site
+            </h3>
+            <ul>
+              <li>HTML5</li>
+              <li>CSS</li>
+              <li>Javascript</li>
+            </ul>
+
+            <h3 id="agents-utilisateurs-technologies-dassistance-et-outils-utilisés-pour-vérifier-laccessibilité">
+              Agents utilisateurs, technologies d’assistance et outils utilisés pour vérifier l’accessibilité
+            </h3>
+            <ul>
+              <li>
+                Les tests des pages web ont été effectués avec les combinaisons de navigateurs web et lecteurs d’écran
+                suivants : Néant
+              </li>
+              <li>Les outils suivants ont été utilisés lors de l’évaluation : Néant</li>
+              <li>Pages du site ayant fait l’objet de la vérification de conformité : Néant</li>
+            </ul>
+
+            <h2 id="retour-dinformation-et-contact">Retour d’information et contact</h2>
+            <p>
+              L’ADEME s’engage à prendre les moyens nécessaires afin de donner accès, dans un délai raisonnable, aux
+              informations et fonctionnalités recherchées par la personne handicapée, que le contenu fasse l’objet d’une
+              dérogation ou non.
+            </p>
+
+            <p>
+              L’ADEME invite les personnes qui rencontreraient des difficultés à la contacter par courriel à{" "}
+              <a href="mailto:datagir@ademe.fr">datagir@ademe.fr</a> afin qu’une assistance puisse être apportée
+              (alternative accessible, information et contenu donnés sous une autre forme).
+            </p>
+
+            <h2 id="défenseur-des-droits">Défenseur des droits</h2>
+            <p>
+              Si vous constatez un défaut d’accessibilité vous empêchant d’accéder à un contenu ou une fonctionnalité du
+              site, que vous nous le signalez et que vous ne parvenez pas à obtenir une réponse rapide de notre part,
+              vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits.
+            </p>
+            <p>Plusieurs moyens sont à votre disposition :</p>
+            <ul>
+              <li>
+                <a
+                  href="https://formulaire.defenseurdesdroits.fr/code/afficher.php?ETAPE=accueil_2016"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  un formulaire de contact
+                </a>
+              </li>
+              <li>
+                <a href="https://www.defenseurdesdroits.fr/office/" target="_blank" rel="noreferrer noopener">
+                  la liste des délégués de votre région
+                </a>
+              </li>
+              <li>un numéro de téléphone : 09 69 39 00 00 (coût d’un appel local)</li>
+              <li>
+                une adresse postale (courrier gratuit, ne pas mettre de timbre) : Le Défenseur des droits - Libre
+                réponse 71120 - 75342 Paris CEDEX 07
+              </li>
+            </ul>
+          </FormatText>
+        </Section2.InnerMargin>
+      </Section2>
+    </Web>
+  );
+}
+
+const FormatText = styled.div`
+  h1 {
+    font-size: 3rem;
+  }
+  > h2 {
+    margin-top: 3rem;
+  }
+`;

src/components/base/Modal3.js

@@ -0,0 +1,99 @@
+import React from "react";
+import styled from "styled-components";
+
+export default function Modal3(props) {
+  return (
+    <Wrapper open={props.open}>
+      <Background
+        open={props.open}
+        onClick={() => {
+          props.dismiss();
+          props.setOpen(false);
+        }}
+      />
+      <Content
+        open={props.open}
+        width={props.width}
+        textColor={props.textColor}
+        backgroundColor={props.backgroundColor}
+        noAnimation={props.noAnimation}
+      >
+        <Header>
+          {props.getTitle ? props.getTitle() : "Titre"}
+          <ButtonClose
+            onClick={() => {
+              props.dismiss();
+              props.setOpen(false);
+            }}
+          >
+            Fermer
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+            </svg>
+          </ButtonClose>
+        </Header>
+
+        <Scroll className={props.className}>{props.children}</Scroll>
+      </Content>
+    </Wrapper>
+  );
+}
+
+const Header = styled.div`
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 1.5rem;
+`;
+
+const Wrapper = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  left: 0;
+  pointer-events: ${(props) => (props.open ? "inherit" : "none")};
+  position: fixed;
+  top: 0;
+  transform: translate3d(0, 0, 1em);
+  width: 100%;
+  z-index: 900;
+`;
+
+const Background = styled.div`
+  background-color: rgba(0, 0, 0, ${(props) => (props.open ? 0.6 : 0)});
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transition: background-color ${(props) => (props.open ? "300ms" : "1ms")} ease-in-out;
+  width: 100%;
+`;
+
+const Content = styled.div`
+  background-color: ${(props) => props.theme.colors.background};
+  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  opacity: ${(props) => (props.open ? 1 : 0)};
+  position: relative;
+  transform: translateX(${(props) => (props.open ? 0 : "10em")});
+  transition: all ${(props) => (props.open && !props.noAnimation ? "300ms" : "1ms")} ease-in-out;
+  visibility: ${(props) => (props.open ? "visible" : "hidden")};
+  width: ${(props) => props.width || "40em"};
+`;
+
+const ButtonClose = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  > svg {
+    margin-left: 0.5rem;
+  }
+`;
+
+const Scroll = styled.div`
+  overflow-y: auto;
+  padding: 1rem 1.5rem;
+`;