Klikkbare feil (#17)

* ✨ Feilkort som ikke er expansioncards

* 🚧 laget overlay med stort hvitt panel ved klikk av panel

* 🐛 Kan avslutte popup-overlay-vinduet ved å hindre DOM bubbling

https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli

* ♻️  Delt opp feilkort og fullvisningskort i to komponenter ved bruk av useContext()

* 📝 La til dokumentasjon for feilkortkomponentene

* ⚰️  Forenklet cardscontainer komponentet ved å fjerne interface

* 🐛 La tilbake interface, da fjerning av dette brekket applikasjon

* ✨ Popup er byttet ut mot AkselModal

* 🐛 Fikset scrolling, ved å tillate Modal i å kjøre cleanup code

frontend/src/components/CardsContainer.tsx

@@ -1,4 +1,4 @@
-import FeilCard from "./FeilCard";
+import { FeilKort } from "./FeilCard";
 import { Feilmelding } from "../interface.ts";
 
 interface ICardsContainer {
@@ -10,18 +10,18 @@ interface ICardsContainer {
  * @returns grid med feilmeldinger 
  */
 const CardsContainer = (props: ICardsContainer) => {
+  
   return (
-    <div>
+      <div className="grid grid-cols-2 gap-6">
-      <div className="grid grid-cols-2 gap-4">
         {props.feilmeldinger.map((feilMelding) => (
-          <FeilCard
+            <FeilKort
               key={props.feilmeldinger.indexOf(feilMelding)}
               tittel={feilMelding.tittel}
               beskrivelse={feilMelding.beskrivelse}
               dato={new Date()}
             />         
-        ))}
+            ))
-      </div>
+          }
       </div>
   );
 };

frontend/src/components/FeilCard.tsx

@@ -1,12 +1,79 @@
 import "@navikt/ds-css";
-import { ExpansionCard, Tag } from "@navikt/ds-react";
+import { Heading, Modal, Tag } from "@navikt/ds-react";
 import { IFeilmelding } from "../interface";
+import FeilModal from "./FeilModal";
+import { useEffect, useState } from "react";
+
+/**
+ * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
+ * @param tittel
+ * @param beskrivelse
+ * @param dato
+ * @returns JSX komponent som beskriver innholdet i feilmeldinger.
+ */
+interface IFeilKort extends IFeilmelding {
+    key: number
+}
+export const FeilKort = (props: IFeilKort) => {
+    const [visModal, setVisModal] = useState<boolean>(false)
+
+    useEffect(() => {
+        Modal.setAppElement(document.getElementById('root'));
+    }, []);
+    
+    return(
+        <>
+            <div 
+                key={props.key}
+                className="
+                bg-bg-default border border-border-default p-7 rounded-lg 
+                hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
+                active:bg-surface-active"
+                onClick={() => setVisModal(true)}
+            >
+                <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
+            </div>
+            <FeilModal open={visModal} setOpen={setVisModal} >
+                <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
+                <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+                {/* TODO: HER KOMMER CONTENT */}
+            </FeilModal>
+        </>
+    )
+}
+
+/**
+ * FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
+ * FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten. 
+ * Midlertidig implementerer komponentet @requires IFeilmelding for props, men dette må endres når IFeilmelding utvides i fremtiden for støtte av flere typer feilmeldinger.
+ * @param tittel
+ * @param beskrivelse
+ * @param haster
+ * @param dato
+ * @returns JSX komponent som skal vise nødvendig informasjon for å forstå en feil.
+ */
+export const FeilkortHeader = (props: IFeilmelding) => {
+    return(
+        <div className="flex justify-between flex-col">
+            <div>
+                <Heading size="medium">{props.tittel}</Heading>
+                <p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
+                <p>{props.beskrivelse}</p>    
+            </div>  
+            <TagBar haster={false}/>              
+        </div>
+    )
+}
+
 
 interface TagBarInterface {
     haster: boolean
 }
-
+/**
-//typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke 
+ * Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
+ * Komponentet er en del av FeilKortHeader
+ * @param haster 
+ */
 const TagBar = (props: TagBarInterface) => {
     return (
         <div className="flex gap-8 mt-4">
@@ -16,21 +83,5 @@ const TagBar = (props: TagBarInterface) => {
     )
 }
 
-const FeilCard = (props: IFeilmelding) => {
-    return (
-        <ExpansionCard aria-label="tekst">
-            <ExpansionCard.Header>
-                <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
-                <ExpansionCard.Description>
-                    {props.beskrivelse}
-                </ExpansionCard.Description>
-                <TagBar haster={true}/>
-            </ExpansionCard.Header>
-            <ExpansionCard.Content>
-                Hællæ
-            </ExpansionCard.Content>
-        </ExpansionCard>
-    )
-}
 
-export default FeilCard;
+

frontend/src/components/FeilModal.tsx

@@ -0,0 +1,26 @@
+import { Modal } from "@navikt/ds-react"
+import { Dispatch, SetStateAction } from "react"
+
+
+interface modalInterface {
+    open: boolean
+    setOpen: Dispatch<SetStateAction<boolean>>
+    children: React.ReactNode
+}
+
+const FeilModal = (props: modalInterface) => {
+    return(                  
+        <Modal
+            className="w-3/5"
+            open={props.open}
+            aria-label={" modal"}
+            onClose={() => props.setOpen(false)}
+            aria-labelledby="modal-heading"
+        >
+        <Modal.Content>
+            {props.children}
+        </Modal.Content>
+    </Modal>
+    )
+}
+export default FeilModal;