Add all help windows

components/common/expandable-panels/PrimaryExpandablePanel.tsx

@@ -7,7 +7,7 @@ import styles from "./PrimaryExpandablePanel.module.scss";
 interface Props {
   expanded?: boolean;
   subTitle?: string;
-  title: string;
+  title: string|JSX.Element;
   icon?: JSX.Element;
 }
 

components/common/help-window/HelpWindow.module.scss

@@ -13,11 +13,11 @@
   align-items: center;
 
   .window {
-    width: 600px;
     background-color: #D2DFFF;
     border-radius: 5px;
     padding: 5px;
     box-shadow: 0 3px 5px 0 rgba(0,0,0,.2), 0 3px 3px 0 rgba(0,0,0,.14), 0 4px 3px -3px rgba(0,0,0,.12);
+    margin-top: 64px;
 
     .header, .content {
       padding: 20px;
@@ -36,6 +36,8 @@
 
     .content {
       background-color: white;
+      max-height: 600px;
+      overflow: scroll
     }
 
   }

components/dotations/articles/Articles.tsx

@@ -3,7 +3,7 @@ import LocalFloristIcon from "@material-ui/icons/LocalFlorist";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
 import { Fragment, PureComponent } from "react";
 
-import { PrimaryExpandablePanel, SecondaryExpandablePanel } from "../../common";
+import { HelpButton, PrimaryExpandablePanel, SecondaryExpandablePanel } from "../../common";
 import { DfEcretementPereque } from "./df-ecretement-pereque";
 import { DfReglesGenerales } from "./df-regles-generales";
 import { DsrEligibilite } from "./dsr-eligibilite";
@@ -30,7 +30,14 @@ export class Articles extends PureComponent {
           <PrimaryExpandablePanel
             expanded
             icon={<LocalFloristIcon />}
-            title="Dotation de solidarité rurale (DSR)">
+            title={(
+              <Fragment>
+                Dotation de solidarité rurale (DSR)
+                {" "}
+                <HelpButton name="dsr" />
+                {" "}
+              </Fragment>
+            )}>
             <SecondaryExpandablePanel
               expanded
               subTitle="Article L2334-20 du CGCT"
@@ -74,7 +81,14 @@ export class Articles extends PureComponent {
           {isDsuVisible && (
             <PrimaryExpandablePanel
               icon={<LocationCityIcon />}
-              title="Dotation de solidarité urbaine (DSU)">
+              title={(
+                <Fragment>
+                  Dotation de solidarité urbaine (DSU)
+                  {" "}
+                  <HelpButton name="dsu" />
+                  {" "}
+                </Fragment>
+              )}>
               <SecondaryExpandablePanel
                 subTitle="Article L2334-16 du CGCT"
                 title="Périmètre général d&apos;éligibilité">

components/dotations/help-windows/dsr-help-window/DsrHelpWindow.module.scss

+.container {
+  width: 800px;
+
+  img {
+    width: 100%;
+  }
+}
\ No newline at end of file

components/dotations/help-windows/dsr-help-window/DsrHelpWindow.tsx

+import LocalFloristIcon from "@material-ui/icons/LocalFlorist";
+import { PureComponent } from "react";
+
+import { HelpWindow } from "../../../common";
+import styles from "./DsrHelpWindow.module.scss";
+
+export class DsrHelpWindow extends PureComponent {
+  render() {
+    return (
+      <HelpWindow name="dsr" title="Qu’est-ce que la dotation de solidarité rurale ?">
+        <div className={styles.container}>
+          La Dotation de Solidarité Rurale, estimée dans ce simulateur, reconnaissable
+          sous le cigle “DSR” ou le symbole
+          {" "}
+          <LocalFloristIcon />
+          , est une part de la dotation d’aménagement des communes.
+          <br />
+          <br />
+          La DSR se divise en trois parts, dites fractions :
+          <ul>
+            <li>la première fraction, “bourg-centre” ;</li>
+            <li>la seconde fraction, “de péréquation” ;</li>
+            <li>la troisième fraction, “cible”.</li>
+          </ul>
+          Selon l’article L2334-20 du CGCT, elle a pour objet de “tenir compte,
+          d&apos;une part, des charges qu&apos;ils [les communes et chefs-lieux
+          d’arrondissement éligibles] supportent pour contribuer au maintien de la
+          vie sociale en milieu rural, d&apos;autre part, de l&apos;insuffisance de
+          leurs ressources fiscales”.
+          <br />
+          <br />
+          <img alt="DSR" src="/static/images/dsr.png" />
+        </div>
+      </HelpWindow>
+    );
+  }
+}

components/dotations/help-windows/dsr-help-window/index.ts

+export { DsrHelpWindow } from "./DsrHelpWindow";

components/dotations/help-windows/dsu-help-window/DsuHelpWindow.module.scss

+.container {
+  width: 800px;
+
+  img {
+    width: 100%;
+  }
+}
\ No newline at end of file

components/dotations/help-windows/dsu-help-window/DsuHelpWindow.tsx

+import LocationCityIcon from "@material-ui/icons/LocationCity";
+import { PureComponent } from "react";
+
+import { HelpWindow } from "../../../common";
+import styles from "./DsuHelpWindow.module.scss";
+
+export class DsuHelpWindow extends PureComponent {
+  render() {
+    return (
+      <HelpWindow name="dsu" title="Qu’est-ce que la dotation de solidarité urbaine et de cohésion sociale ?">
+        <div className={styles.container}>
+          La Dotation de Solidarité Urbaine et de cohésion sociale, estimée dans ce simulateur,
+          reconnaissable sous le cigle “DSU” ou le symbole
+          {" "}
+          <LocationCityIcon />
+          , est une part de la dotation d’aménagement des communes.
+          <br />
+          <br />
+          Selon l’article L2334-15 du CGCT, elle “a pour objet de contribuer à l&apos;amélioration
+          des conditions de vie dans les communes urbaines confrontées à une insuffisance de
+          leurs ressources et supportant des charges élevées.”
+          <br />
+          <br />
+          <img alt="DSU" src="/static/images/dsu.png" />
+        </div>
+      </HelpWindow>
+    );
+  }
+}

components/dotations/help-windows/dsu-help-window/index.ts

+export { DsuHelpWindow } from "./DsuHelpWindow";

components/dotations/help-windows/index.ts

+export * from "./dsr-help-window";
+export * from "./dsu-help-window";
+export * from "./montants-dsr-help-window";
+export * from "./potentiel-financier-help-window";
+export * from "./trend-help-window";

components/dotations/help-windows/montants-dsr-help-window/MontantsDsrHelpWindow.module.scss

+.container {
+  width: 700px;
+}
\ No newline at end of file

components/dotations/help-windows/montants-dsr-help-window/MontantsDsrHelpWindow.tsx

+import { PureComponent } from "react";
+
+import { HelpWindow } from "../../../common";
+import styles from "./MontantsDsrHelpWindow.module.scss";
+
+export class MontantsDsrHelpWindow extends PureComponent {
+  render() {
+    return (
+      <HelpWindow name="montants dsr" title="Pourquoi deux montants sont-ils donnés en résultat pour la DSR ?">
+        <div className={styles.container}>
+          La dotation de solidarité rurale comprend un système de garanties. Ainsi,
+          une commune qui perd sa DSR, hérite en réalité d’une trajectoire de baisse
+          jusqu’à zéro sur plusieurs années. De même, une commune qui a une forte
+          hausse de sa DSR, voit sa DSR progresser sur plusieurs années.
+          <br />
+          <br />
+          Ces garanties sont exposés aux alinéas 15 à 18 de l’Article L2334-21, et
+          aux alinéas 8 à 9 de l’Article L2334- 22. La loi indique que l’attribution
+          “ne peut être ni inférieure à 90 % ni supérieure à 120 % du montant perçu
+          l&apos;année précédente.”
+        </div>
+      </HelpWindow>
+    );
+  }
+}

components/dotations/help-windows/montants-dsr-help-window/index.ts

+export { MontantsDsrHelpWindow } from "./MontantsDsrHelpWindow";

components/dotations/help-windows/potentiel-financier-help-window/PotentielFinancierHelpWindow.module.scss

+.container {
+  width: 600px;
+}
\ No newline at end of file

components/dotations/help-windows/potentiel-financier-help-window/PotentielFinancierHelpWindow.tsx

+import { PureComponent } from "react";
+
+import { HelpWindow } from "../../../common";
+import styles from "./PotentielFinancierHelpWindow.module.scss";
+
+export class PotentielFinancierHelpWindow extends PureComponent {
+  render() {
+    return (
+      <HelpWindow name="potentiel financier" title="Qu’est-ce que le potentiel financier ?">
+        <div className={styles.container}>
+          Le potentiel financier est un indicateur des ressources d&apos;une
+          collectivité locale. Celui-ci rend compte des différentes richesses
+          perçues par la commune sur son territoire.
+          <br />
+          <br />
+          Le potentiel financier se calcule par rapport à la population dite DGF,
+          en prenant en compte :
+          <ul>
+            <li>les revenus des impôts locaux des ménages ; </li>
+            <li>les revenus des impôts locaux des entreprises ; </li>
+            <li>la dotation forfaitaire de la commune ;</li>
+            <li>les sommes perçues au travers de l&apos;EPCI pour les communes concernées.</li>
+          </ul>
+          <br />
+          L&apos;indicateur peut être donné pour la commune, ou rapporté à son nombre
+          d&apos;habitants, comme nous le faisons sur LexImpact. Par exemple, la commune
+          de XXXX à un potentiel financier de XXXX €, ce qui représente un potentiel
+          financier par habitant de XXX €.
+          <br />
+          <br />
+          Cette explication est volontairement simplifiée. Pour toute référence exacte,
+          il faut vous fier uniquement au Code Général des Collectivités Territoriales,
+          et/ou aux écrits de la DGCL.
+        </div>
+      </HelpWindow>
+    );
+  }
+}

components/dotations/help-windows/potentiel-financier-help-window/index.ts

+export { PotentielFinancierHelpWindow } from "./PotentielFinancierHelpWindow";

components/dotations/help-windows/trend-help-window/TrendHelpWindow.module.scss

+.container {
+  width: 600px;
+  
+  .icon {
+    width: 24px;
+    height: 24px;
+    font-size: 30px;
+  }
+}
\ No newline at end of file

components/dotations/help-windows/trend-help-window/TrendHelpWindow.tsx

+import { PureComponent } from "react";
+
+import { HelpWindow } from "../../../common";
+import styles from "./TrendHelpWindow.module.scss";
+
+export class TrendHelpWindow extends PureComponent {
+  render() {
+    return (
+      <HelpWindow name="trend" title="Comment est définie la tendance ?">
+        <div className={styles.container}>
+          Cet indicateur vous permet de visualiser la tendance de l’impact
+          sur les dotations de l’entité concernée (commune, strate démographique
+          de communes ...).
+          <br />
+          <br />
+          Nous affichons cette tendance en suivant les règles suivantes :
+          <ul>
+            <li>
+              quand l’impact est positif, la tendance est à la hausse
+              {" "}
+              <img alt="" className={styles.icon} src="/icons/picto-dotation-tendance-monte.svg" />
+              {" "}
+              ;
+              quand l’impact est négatif, la tendance est à la baisse
+              {" "}
+              <img alt="" className={styles.icon} src="/icons/picto-dotation-tendance-baisse.svg" />
+              {" "}
+              ;
+              quelque soit l’amplitude de l’impact.
+            </li>
+            <li>
+            quand il n’y a pas d’impact, il est indiqué “Pas d’évolution”.
+            Ce cas intervient lorsque que les montants avant et après impact sont
+            strico sensu identiques.
+            </li>
+          </ul>
+        </div>
+      </HelpWindow>
+    );
+  }
+}

components/dotations/help-windows/trend-help-window/index.ts

+export { TrendHelpWindow } from "./TrendHelpWindow";

components/dotations/index.ts

+export * from "./help-windows";
 export * from "./articles";
 export * from "./results";