feat: hassuyp-176 kansalaisen aineistojen tooltipit (#1251)

* still need to fix indicator

* to tailwind

* fixed issue with alignItems

* works on mobile

* removed commented code

* removed testing state setter

* medium -> small

* fix

* suggested changes

* cleaned

* commas to semicolon

src/components/HassuAccordion.tsx

@@ -21,12 +21,14 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => (
   />
 ))(({ theme }) => ({
   flexDirection: "row-reverse",
+  alignItems: "start",
   "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
     transform: "rotate(90deg)",
   },
   "& .MuiAccordionSummary-expandIconWrapper": {
-    width: "24px",
-    height: "24px",
+    minWidth: "24px",
+    minHeight: "24px",
+    marginTop: "12px",
   },
   padding: 0,
   "& .MuiAccordionSummary-content": {
@@ -45,6 +47,7 @@ export interface AccordionItem {
   title: string | JSX.Element;
   content: ReactNode | string;
   id?: Key;
+  tooltip?: JSX.Element;
 }
 
 type Props = {
@@ -78,7 +81,7 @@ export default function CustomizedAccordions(props: Props) {
             expanded={expanded.includes(key)}
             onChange={handleChange(key)}
           >
-            <AccordionSummary>
+            <AccordionSummary sx={{pointerEvents: "auto"}}>
               {typeof item.title === "string" ? <h5 className="vayla-smallest-title mb-0">{item.title}</h5> : item.title}
             </AccordionSummary>
             <AccordionDetails>{item.content}</AccordionDetails>

src/components/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactElement, ReactNode, useCallback, useState } from "react";
+import React, { ComponentProps, MouseEventHandler, ReactElement, ReactNode, useCallback, useState } from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 import CloseIcon from "@mui/icons-material/Close";
@@ -46,7 +46,7 @@ interface Props {
   hideIcon?: boolean;
   closable?: boolean;
   open?: boolean;
-  onClose?: () => void;
+  onClose?: MouseEventHandler;
 }
 
 const NotificationContent = styled("div")(

src/components/projekti/common/KansalaisenAineistoNakyma.tsx

@@ -17,6 +17,48 @@ import { ButtonFlatWithIcon } from "@components/button/ButtonFlat";
 import { H3, H4, H5 } from "@components/Headings";
 import { AineistoLinkkiLista } from "../kansalaisnakyma/AineistoLinkkiLista";
 import { isDateTimeInThePast } from "backend/src/util/dateUtil";
+import Notification, { NotificationType } from "../../notification/Notification";
+
+type AccordioSummaryContentProps = {
+  titleText: string;
+  paakategoria?: boolean;
+  tooltipText?: string;
+};
+
+const AccordioSummaryContent = ({ titleText, paakategoria, tooltipText }: AccordioSummaryContentProps) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const Heading = paakategoria ? H4 : H5;
+  return (
+    <div className="w-full">
+      <div className="flex flex-row items-center justify-between max-w-sm">
+        <Heading variant="h5" sx={{ margin: 0, alignSelf: "baseline" }}>
+          {titleText}
+        </Heading>
+        {tooltipText && (
+            <FontAwesomeIcon
+              color="rgb(0, 100, 175)"
+              size={"lg"}
+              icon="info-circle"
+              type={NotificationType.INFO_GRAY}
+              cursor="pointer"
+              onMouseEnter={() => setShowTooltip(true)}
+              onClick={(event) => {event.stopPropagation(); setShowTooltip(true)}}
+            />
+        )}
+      </div>
+      <Notification
+        type={NotificationType.INFO_GRAY}
+        className="mt-4"
+        open={showTooltip}
+        onClose={(event) => {event.stopPropagation(); setShowTooltip(false)}}
+        closable
+        style={{ maxWidth: "40rem" }}
+      >
+        <p>{tooltipText}</p>
+      </Notification>
+    </div>
+  );
+};
 
 type Props = {
   projekti: ProjektiJulkinen;
@@ -121,13 +163,9 @@ const AineistoKategoriaAccordion = (props: AineistoKategoriaAccordionProps) => {
 
     return aineistotKategorioittain.map<AccordionItem>(({ kategoria, aineisto }) => {
       const titleText = t(`aineisto-kategoria-nimi.${kategoria.id}`) + " (" + (aineisto?.length || 0) + ")";
-      const Heading = props.paakategoria ? H4 : H5;
+      const tooltipText = props.paakategoria ? t(`aineisto-kategoria-tooltip.${kategoria.id}`) : undefined;
       return {
-        title: (
-          <Heading variant="h5" sx={{ margin: 0 }}>
-            {titleText}
-          </Heading>
-        ),
+        title: <AccordioSummaryContent titleText={titleText} paakategoria={props.paakategoria} tooltipText={tooltipText} />,
         content: (
           <SuunnitelmaAineistoKategoriaContent
             aineistot={aineisto}

src/locales/fi/aineisto.json

@@ -29,11 +29,14 @@
     "muut_selvitykset": "Muut selvitykset",
     "valaistuksen_ja_liikenteenohjauksen_yleiskartat": "Valaistuksen ja liikenteenohjauksen yleiskartat",
     "johtosiirrot_ja_kunnallistekniset_suunnitelmat": "Johtosiirrot ja kunnallistekniset suunnitelmat",
-
     "kategorisoimattomat": "Kategorisoimattomat",
-
     "ulkopuoliset_rakenteet": "Ulkopuoliset rakenteet"
   },
+  "aineisto-kategoria-tooltip": {
+    "osa_a": "Selostusosaan sisältyy suunnitelman lähtökohtia ja sisältöä sekä suunnitelman arvioituja vaikutuksia kuvaavia asiakirjoja.\n Kansio sisältää mm. sisällysluettelon ja suunnitelmaselostuksen, joka on tiivis kuvaus suunnittelun lähtökohdista, sen vaiheista ja tuloksista. Selostuksessa kuvataan kaikki suunnitelmaan perehtymisen ja käsittelyn kannalta olennaiset asiat.\n Osasta suunnitelmista löytyy myös hyväksymisehdotus, josta selviää yksityiskohtaisesti mitä ehdotetaan hyväksyttäväksi.",
+    "osa_b": "Pääpiirustuksissa esitetään suunnitelman hyväksyttäväksi ehdotettava sisältö karttamuodossa. Kartoissa esitellään suunnitelman yksityiskohdat ja pituus- sekä poikkileikkaukset.",
+    "osa_c": "Informatiivista aineistoa ei hyväksytä, mutta se täydentää, havainnollistaa ja perustelee hyväksyttäväksi esitettyä suunnitelmaratkaisua ja sen avulla kuvataan suunnitelman vaikutuksia. Aineistokokonaisuus sisältää erityyppisiä informatiivisia piirustuksia ja selvityksiä, kuten ympäristösuunnitelmat, vaikutusselvitykset ja selvitykset tutkituista vaihtoehdoista."
+  },
   "lisa-aineisto": "Lausuntopyyntöön liitetty lisäaineisto",
   "uusi-aineisto": "Uusi aineisto",
   "sulje_kaikki": "Sulje kaikki kategoriat",

src/locales/sv/aineisto.json

@@ -29,11 +29,14 @@
     "muut_selvitykset": "Övriga utredningar",
     "valaistuksen_ja_liikenteenohjauksen_yleiskartat": "Översiktskartor över belysning och trafikledning",
     "johtosiirrot_ja_kunnallistekniset_suunnitelmat": "Förflyttning av ledningar och kommunaltekniska planer",
-
     "kategorisoimattomat": "Okategoriserad",
-
     "ulkopuoliset_rakenteet": "Utomstående konstruktioner"
   },
+  "aineisto-kategoria-tooltip": {
+    "osa_a": "Beskrivningsdelen innehåller bl.a. en innehållsförteckning och en planbeskrivning. Planbeskrivningen är en kortfattad beskrivning av utgångspunkterna för planeringen, dess faser och resultat. I beskrivningen beskrivs alla frågor som är väsentliga med tanke på planens innehåll och behandling. I denna del finns också ett förslag till godkännande där detaljerna i den plan som ska godkännas presenteras.",
+    "osa_b": "I huvudritningarna presenteras det innehåll som föreslås för godkännande på plankartor och olika ritningar. I dokumenten presenteras planens detaljer, höjdläge och utrymmesbehov.",
+    "osa_c": "Det informativa materialet ska inte godkännas. Detta material kompletterar, åskådliggör och motiverar den planlösning som föreslagits för godkännande. I det informativa materialet beskrivs bl.a. planens effekter. Materialhelheten innehåller olika typer av ritningar och utredningar. Dessa är bland annat miljöplaner, konsekvensutredningar och utredningar av undersökta alternativ. Det väsentliga i utredningarna beskrivs i korthet i planbeskrivningen."
+  },
   "lisa-aineisto": "Ytterligare material bifogat utlåtandebegäran",
   "uusi-aineisto": "Nytt material",
   "sulje_kaikki": "Stäng alla kategorier",