Ajouter l'UX des résultats de la page dotation

components/articles/quotient-familial/regles-generales/QfTable.module.scss

@@ -1,7 +1,9 @@
+@import "styles/variables";
+
 $second-column-width: 150px;
 $row-padding-x: 20px;
 
-$row-primary-color: #f1f1f1;
+$row-primary-color: $light-grey-bg-color;
 $row-second-color: white;
 
 $inside-border: 1px solid #e0e0e1;
@@ -20,7 +22,6 @@ $outside-border: 1px solid #b1b1b1;
       align-items: center;
       justify-content: center;
       text-align: center;
-      text-transform: uppercase;
       padding: 20px;
     }
 

components/card/Card.module.scss

@@ -0,0 +1,52 @@
+@import 'styles/variables';
+
+.card {
+  min-width: 50px;
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12);
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.7);
+  font-family: $default-font-family;
+}
+
+.header, .content1, .content2 {
+  padding: 15px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0;
+
+  .icon {
+    margin-right: 10px;
+  }
+
+  .titles {
+    flex: 1;
+
+    .title {
+      font-weight: bold;
+      font-size: 1.125em;
+      color: $dark-grey-text-color;
+      padding-bottom: 5px;
+    }
+
+    .subTitle {
+      font-size: 0.875em;
+      color: $dark-grey-text-color;
+    }
+
+  }
+
+  .buttons {
+    margin-left: 10px;
+
+    >* {
+      cursor: pointer;
+    }
+
+    :last-child {
+      margin-left: 5px;
+    }
+  }
+}

components/card/Card.tsx

@@ -0,0 +1,61 @@
+import Divider from "@material-ui/core/Divider";
+import CloseIcon from "@material-ui/icons/Close";
+import EditIcon from "@material-ui/icons/Edit";
+import { PureComponent } from "react";
+
+import styles from "./Card.module.scss";
+
+interface Props {
+  icon?: JSX.Element;
+  title: string;
+  subTitle?: string;
+  onClose?: () => void;
+  onEdit?: () => void;
+  content1: JSX.Element;
+  content2?: JSX.Element;
+  content3?: JSX.Element;
+}
+
+export class Card extends PureComponent<Props> {
+  render() {
+    const {
+      content1, content2, content3, icon, onClose, onEdit, subTitle, title,
+    } = this.props;
+    return (
+      <div className={styles.card}>
+        <div className={styles.header}>
+          {icon && <div className={styles.icon}>{icon}</div>}
+          <div className={styles.titles}>
+            <div className={styles.title}>
+              {title}
+            </div>
+            {subTitle && (
+              <div className={styles.subTitle}>
+                {subTitle}
+              </div>
+            )}
+          </div>
+          <div className={styles.buttons}>
+            {onEdit && <EditIcon fontSize="small" onClick={onEdit} />}
+            {onClose && <CloseIcon fontSize="small" onClick={onClose} />}
+          </div>
+        </div>
+        <div className={styles.content1}>
+          {content1}
+        </div>
+        {content2 && <Divider />}
+        {content2 && (
+          <div className={styles.content2}>
+            {content2}
+          </div>
+        )}
+        {content3 && <Divider />}
+        {content3 && (
+          <div className={styles.content2}>
+            {content3}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

components/card/index.ts

@@ -0,0 +1 @@
+export { Card } from "./Card";

components/carte-etat/carte-etat-component.jsx

@@ -1,8 +1,6 @@
 import classicalBuilding from "@iconify/icons-twemoji/classical-building";
 import { Icon } from "@iconify/react";
 import Button from "@material-ui/core/Button";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
@@ -15,8 +13,9 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import FaceIcon from "@material-ui/icons/Face";
 import classNames from "classnames";
 import PropTypes from "prop-types";
-import { PureComponent } from "react";
+import { Fragment, PureComponent } from "react";
 
+import { Card } from "../card";
 import BarChart from "./bar-chart";
 import styles2 from "./carte-etat-component.module.scss";
 import SimpopTableurInfosDeciles from "./simpop-tableur-infos-deciles";
@@ -57,13 +56,6 @@ const styles = () => ({
     fontSize: "0.875em",
     padding: "0 0 10px 10px",
   },
-  titleCarteEtat: {
-    color: "#565656",
-    fontFamily: "Lato",
-    fontSize: "1.125em",
-    fontWeight: "bold",
-    padding: "0 0 0 10px",
-  },
 });
 
 function getRoundedTotal(value) {
@@ -90,22 +82,9 @@ class CarteEtat extends PureComponent {
     const totalApres = getRoundedTotal(apres);
     const totalPLF = montrerPLF ? getRoundedTotal(plf) : null;
     return (
-      <Card>
-        <CardContent>
-          <div className={styles2.titleWrapper}>
-            <div className={styles2.divTitre}>
-              <Icon height="40" icon={classicalBuilding} width="40" />
-            </div>
-            <div className={styles2.divTitre}>
-              <Typography className={classes.titleCarteEtat}>
-                Recettes de l&apos;État sur l&apos;impôt sur le revenu
-              </Typography>
-              <Typography className={classes.subtitleCarteEtat}>
-                par décile de population et par an
-              </Typography>
-            </div>
-          </div>
-
+      <Card
+        content1={(
+          <Fragment>
             {isDisabledEtat && (
               <div>
                 <center className={classes.buttonPosition}>
@@ -213,10 +192,11 @@ class CarteEtat extends PureComponent {
                 </div>
               </div>
             )}
-        </CardContent>
-        { (isLoadingEtat || isDisabledEtat) ? ("")
+          </Fragment>
+        )}
+        content2={(isLoadingEtat || isDisabledEtat) ? null
           : (
-            <ExpansionPanel>
+            <ExpansionPanel className={styles2.expansionPanel}>
               <ExpansionPanelSummary
                 className={styles2.styleExpansionPanel}
                 expandIcon={<ExpandMoreIcon />}>
@@ -233,7 +213,10 @@ class CarteEtat extends PureComponent {
             </ExpansionPanel>
           )
         }
-      </Card>
+        icon={<Icon height="40" icon={classicalBuilding} width="40" />}
+        subTitle="par décile de population et par an"
+        title="Recettes de l&apos;État sur l&apos;impôt sur le revenu"
+      />
     );
   }
 }

components/carte-etat/carte-etat-component.module.scss

@@ -51,11 +51,6 @@
   margin-top: 20px;
 }
 
-.divTitre {
-  display: inline-block;
-  padding-left: 3px
-}
-
 .chartWrapper {
   height: 210px;
   display: flex;
@@ -75,10 +70,6 @@
   }
 }
 
-.titleWrapper {
-  display: flex;
-}
-
 .styleExpansionPanel {
   margin: 0px;
   overflow-x:scroll;
@@ -91,3 +82,7 @@
   text-align: right;
   margin-left: 15px;
 }
+
+.expansionPanel {
+  margin: -15px !important;
+}