fix: recos

SocialGouv · Jul 20, 2023 · 3145e7a · 3145e7a
1 parent b1210b1
commit 3145e7a
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 105 deletions.
diff --git a/frontend/src/components/Recommandations.js b/frontend/src/components/Recommandations.js
@@ -7,34 +7,10 @@ import IndiceAtmo from "utils/icons/IndiceAtmo";
 import IndiceUv from "utils/icons/IndiceUv";
 import Raep from "utils/icons/Raep";
 import VigilanceMeteo from "utils/icons/VigilanceMeteo";
+import Baignades from "../utils/icons/Baignades";
+import Radon from "../utils/icons/Radon";
+import Pollution from "../utils/icons/Pollution";
 
-const Options = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin: 2rem auto;
-
-  ${(props) => props.theme.mq.small} {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-`;
-const NoIcon = styled.svg`
-  width: 48px;
-  height: 0rem;
-`;
-const Type = styled.h2`
-  margin-bottom: 2rem;
-`;
-const Critere = styled.h3`
-  margin-bottom: 1.5rem;
-`;
-const SousCritere = styled.h4`
-  margin-bottom: 1rem;
-  color: ${(props) => props.theme.colors.text};
-`;
 const Recommandation = styled.div`
   margin-bottom: 1rem;
   &:not(:last-child):after {
@@ -62,24 +38,23 @@ export default function Recommandations(props) {
     radon: "Potentiel Radon",
   };
   let options = [];
-  Object.keys(types).map((t) =>
+  const icons = {
+    indice_atmo: <IndiceAtmo />,
+    pollens: <Raep />,
+    vigilance_meteo: <VigilanceMeteo />,
+    indice_uv: <IndiceUv />,
+    baignades: <Baignades />,
+    radon: <Radon />,
+    episode_pollution: <Pollution />,
+    // episode_pollution: <svg className="h-0 w-12" />,
+  };
+  for (const type of Object.keys(types)) {
     options.push({
-      value: t,
-      label: types[t],
-      icon:
-        t === "indice_atmo" ? (
-          <IndiceAtmo />
-        ) : t === "pollens" ? (
-          <Raep />
-        ) : t === "vigilance_meteo" ? (
-          <VigilanceMeteo />
-        ) : t === "indice_uv" ? (
-          <IndiceUv />
-        ) : (
-          <NoIcon />
-        ),
-    })
-  );
+      value: type,
+      label: types[type],
+      icon: icons[type],
+    });
+  }
   const { data } = useRecommandations();
   const groupBy = (objectArray, property) => {
     return objectArray.reduce((acc, obj) => {
@@ -182,10 +157,10 @@ export default function Recommandations(props) {
     qa_bonne: [],
     qa_mauvaise: [],
   };
-  const [filters, setFilters] = useState(Object.keys(types));
+  const [filters, setFilters] = useState([]);
   return (
     <>
-      <Options>
+      <div className="relative my-8 flex flex-col items-stretch justify-start overflow-hidden md:flex-row">
         {options.map((option) => (
           <Option
             key={option.value}
@@ -206,43 +181,49 @@ export default function Recommandations(props) {
             }}
           />
         ))}
-      </Options>
-      {Object.keys(types).map((t) => (
-        <section id={t} key={t}>
-          {recommandations[t] && filters.includes(t) && (
-            <>
-              <Type>{types[t]}</Type>
-              {Object.keys(recommandations[t]).map((c) => (
-                <section id={t + "-" + c} key={t + "-" + c}>
-                  {criteres[c] && <Critere>{criteres[c]}</Critere>}
-                  {recommandations[t][c]?.map((r, i) => (
-                    <React.Fragment key={t + "-" + c + "-" + i}>
-                      {t === "indice_atmo" &&
-                        (r.categorie || (r.categorie = "Toute catégorie")) &&
-                        uniqueCategories[c] &&
-                        !uniqueCategories[c].includes(r.categorie) &&
-                        uniqueCategories[c].push(r.categorie) && (
-                          <SousCritere>{r.categorie}</SousCritere>
-                        )}
-                      {t === "vigilance_meteo" &&
-                        phenomenes[r.vigilance_phenomene_ids] && (
-                          <SousCritere>
-                            {phenomenes[r.vigilance_phenomene_ids]}
-                          </SousCritere>
-                        )}
-                      <Recommandation
-                        dangerouslySetInnerHTML={{
-                          __html: r.recommandation,
-                        }}
-                      />
-                    </React.Fragment>
-                  ))}
-                </section>
-              ))}
-            </>
-          )}
-        </section>
-      ))}
+      </div>
+      {filters.map((t) => {
+        return (
+          <details open className="flex flex-col" id={t} key={t}>
+            {recommandations[t] && (
+              <>
+                <summary>
+                  <h2 className="mb-8 mr-auto inline-block rounded bg-main p-4 text-white">
+                    {types[t]}
+                  </h2>
+                </summary>
+                {Object.keys(recommandations[t]).map((c) => (
+                  <section id={t + "-" + c} key={t + "-" + c}>
+                    {criteres[c] && <h3 className="mb-6">{criteres[c]}</h3>}
+                    {recommandations[t][c]?.map((r, i) => (
+                      <React.Fragment key={t + "-" + c + "-" + i}>
+                        {t === "indice_atmo" &&
+                          (r.categorie || (r.categorie = "Toute catégorie")) &&
+                          uniqueCategories[c] &&
+                          !uniqueCategories[c].includes(r.categorie) &&
+                          uniqueCategories[c].push(r.categorie) && (
+                            <h4 className="mb-4 text-text">{r.categorie}</h4>
+                          )}
+                        {t === "vigilance_meteo" &&
+                          phenomenes[r.vigilance_phenomene_ids] && (
+                            <h4 className="mb-4 text-text">
+                              {phenomenes[r.vigilance_phenomene_ids]}
+                            </h4>
+                          )}
+                        <Recommandation
+                          dangerouslySetInnerHTML={{
+                            __html: r.recommandation,
+                          }}
+                        />
+                      </React.Fragment>
+                    ))}
+                  </section>
+                ))}
+              </>
+            )}
+          </details>
+        );
+      })}
     </>
   );
 }
diff --git a/frontend/src/components/subscription/question/Option.js b/frontend/src/components/subscription/question/Option.js
@@ -7,6 +7,9 @@ const Wrapper = styled.div`
   position: relative;
   padding: 0 0.5rem;
   margin-bottom: 1rem;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-basis: 100%;
 
   ${(props) => props.theme.mq.smallish} {
     flex-basis: 50%;
@@ -20,7 +23,7 @@ const Button = styled.button`
   justify-content: space-between;
   align-items: center;
   overflow: hidden;
-  width: 10rem;
+  width: 100%;
   height: 10rem;
   margin: 0 auto;
   padding: 0.6875rem 0.25rem 0.5rem;
@@ -44,14 +47,18 @@ const Button = styled.button`
   }
 
   ${(props) => props.theme.mq.small} {
-    flex-direction: row-reverse;
+    flex-direction: row;
     width: 100%;
     height: 4.5rem;
     padding: 0.75rem 1rem;
     border: 0.1875rem solid ${(props) => props.theme.colors.main};
     border-radius: 1.5rem;
   }
 
+  svg {
+    width: 3rem;
+  }
+
   .fill {
     fill: ${(props) =>
       props.theme.colors[props.active ? "background" : "main"]};

diff --git a/frontend/src/pages/articles.js b/frontend/src/pages/articles.js
@@ -12,10 +12,7 @@ export default function Articles({
   console.log({ categories });
   return (
     <Web title={"Nos articles"}>
-      <section
-        className="relative mx-auto flex max-w-sm flex-col px-6 pt-10 md:max-w-6xl xl:pt-20"
-        medium
-      >
+      <section className="relative mx-auto flex max-w-sm flex-col px-6 pt-10 md:max-w-6xl xl:pt-20">
         <h1>
           Nos <strong>articles</strong>
         </h1>

diff --git a/frontend/src/templates/recommandations.js b/frontend/src/templates/recommandations.js
@@ -4,21 +4,10 @@ import styled from "styled-components";
 
 import Content from "components/Recommandations";
 import Button from "components/base/Button";
-import Section from "components/base/Section";
 import Web from "components/layout/Web";
 
 import apiUrl from "utils/apiUrl";
 
-const Title = styled.h1`
-  color: ${(props) => props.theme.colors.main};
-  font-size: 3.25rem;
-  margin: 2rem 0;
-
-  ${(props) => props.theme.mq.small} {
-    font-size: 1.5rem;
-    margin: 1.5rem 0;
-  }
-`;
 const Introduction = styled.div`
   background-color: #eef1f7;
   padding: 2rem;
@@ -31,16 +20,18 @@ const Introduction = styled.div`
 export default function Recommandations(props) {
   return (
     <Web title={props.data.mdx.frontmatter.title}>
-      <Section first medium>
-        <Title>{props.data.mdx.frontmatter.title}</Title>
+      <section className="relative mx-auto flex max-w-sm flex-col px-6 pt-10 md:max-w-6xl xl:pt-20">
+        <h1 className="max-sm:text-[6.5vw]">
+          Nos <strong>Recommandations</strong>
+        </h1>
         <Introduction>{props.children}</Introduction>
         <Content recommandations={props.pageContext.recommandations} />
-        <Button.Wrapper center>
+        <div className="mb-8 flex items-center justify-center">
           <Button to={`${apiUrl}/v1/recommandations.csv`}>
             Télécharger au format CSV
           </Button>
-        </Button.Wrapper>
-      </Section>
+        </div>
+      </section>
     </Web>
   );
 }

diff --git a/frontend/src/utils/icons/Baignades.js b/frontend/src/utils/icons/Baignades.js
@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.svg`
+  width: auto;
+  height: 2.75rem;
+`;
+export default function Baignades() {
+  return (
+    <Wrapper width="32" height="32" viewBox="0 0 32 32">
+      <path
+        d="M4 8C7.31067 8 9.79333 4 9.79333 4C9.79333 4 12.276 8 15.586 8C18.8967 8 22.2067 4 22.2067 4C22.2067 4 25.5173 8 28 8"
+        className="stroke"
+        strokeWidth="1.84615"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <path
+        d="M4 18C7.31067 18 9.79333 14 9.79333 14C9.79333 14 12.276 18 15.586 18C18.8967 18 22.2067 14 22.2067 14C22.2067 14 25.5173 18 28 18"
+        className="stroke"
+        strokeWidth="1.84615"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <path
+        d="M4 28C7.31067 28 9.79333 24 9.79333 24C9.79333 24 12.276 28 15.586 28C18.8967 28 22.2067 24 22.2067 24C22.2067 24 25.5173 28 28 28"
+        className="stroke"
+        strokeWidth="1.84615"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Wrapper>
+  );
+}
diff --git a/frontend/src/utils/icons/Pollution.js b/frontend/src/utils/icons/Pollution.js
@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.svg`
+  width: auto;
+  height: 2.75rem;
+`;
+export default function Pollution() {
+  return (
+    <Wrapper width="17" height="16" viewBox="0 0 17 16">
+      <path
+        d="M9.07667 2.0002L15.4275 13.0002C15.6116 13.3191 15.5023 13.7268 15.1835 13.9109C15.0821 13.9694 14.9672 14.0002 14.8501 14.0002H2.14845C1.78025 14.0002 1.48178 13.7017 1.48178 13.3335C1.48178 13.2165 1.51258 13.1015 1.57109 13.0002L7.92194 2.0002C8.10607 1.68133 8.51374 1.57208 8.83261 1.75618C8.93401 1.81469 9.01814 1.89885 9.07667 2.0002ZM7.83261 10.6669V12.0002H9.16594V10.6669H7.83261ZM7.83261 6.0002V9.33355H9.16594V6.0002H7.83261Z"
+        className="fill"
+      />
+    </Wrapper>
+  );
+}
diff --git a/frontend/src/utils/icons/Radon.js b/frontend/src/utils/icons/Radon.js
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.svg`
+  width: auto;
+  height: 2.75rem;
+`;
+export default function Radon() {
+  return (
+    <Wrapper width="32" height="32" viewBox="0 0 32 32">
+      <path
+        d="M31.5563 14.9715L28.6472 12.0624L17.0107 0.425875C16.7379 0.153188 16.368 0 15.9823 0C15.5966 0 15.2267 0.153188 14.9539 0.425875L3.31743 12.0624L0.408312 14.9715C0.143352 15.2458 -0.00325911 15.6132 5.49862e-05 15.9946C0.00336909 16.376 0.156344 16.7408 0.426031 17.0105C0.695718 17.2802 1.06054 17.4332 1.44192 17.4365C1.8233 17.4398 2.19073 17.2932 2.46506 17.0282L2.89125 16.602V30.5454C2.89125 30.9312 3.0445 31.3012 3.31728 31.574C3.59006 31.8468 3.96003 32 4.34581 32H27.6188C28.0046 32 28.3745 31.8468 28.6473 31.574C28.9201 31.3012 29.0733 30.9312 29.0733 30.5454V16.602L29.4995 17.0282C29.7739 17.2932 30.1413 17.4398 30.5227 17.4365C30.904 17.4332 31.2689 17.2802 31.5386 17.0105C31.8082 16.7408 31.9612 16.376 31.9645 15.9946C31.9678 15.6132 31.8212 15.2458 31.5563 14.9715ZM26.1642 29.0909H5.80037V13.6929L15.9823 3.511L26.1642 13.6929V29.0909Z"
+        className="fill"
+      />
+      <rect
+        x="8.18359"
+        y="23.7988"
+        width="15.5978"
+        height="2.97102"
+        rx="1.45617"
+        className="fill"
+      />
+      <rect
+        x="8.18359"
+        y="18.5991"
+        width="15.5978"
+        height="2.97101"
+        rx="1.45617"
+        className="fill"
+      />
+      <rect
+        x="8.18359"
+        y="13.4004"
+        width="15.5978"
+        height="2.97101"
+        rx="1.45617"
+        className="fill"
+      />
+    </Wrapper>
+  );
+}