From 413a6277f4bcfa1a1aa1c6706bb4573fb748ec20 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Mon, 31 Jul 2023 14:05:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Popup=20er=20byttet=20ut=20mot=20Ak?=
 =?UTF-8?q?selModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CardsContainer.tsx |  18 +--
 frontend/src/components/FeilCard.tsx       | 125 +++++++--------------
 frontend/src/components/FeilModal.tsx      |  26 +++++
 3 files changed, 74 insertions(+), 95 deletions(-)
 create mode 100644 frontend/src/components/FeilModal.tsx

diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx
index 8708a7b..e2a9dbd 100644
--- a/frontend/src/components/CardsContainer.tsx
+++ b/frontend/src/components/CardsContainer.tsx
@@ -10,19 +10,19 @@ interface ICardsContainer {
  * @returns grid med feilmeldinger 
  */
 const CardsContainer = (props: ICardsContainer) => {
+  
   return (
-    <div>
       <div className="grid grid-cols-2 gap-6">
         {props.feilmeldinger.map((feilMelding) => (
-          <FeilKort
-            key={props.feilmeldinger.indexOf(feilMelding)}
-            tittel={feilMelding.tittel}
-            beskrivelse={feilMelding.beskrivelse}
-            dato={new Date()}
-          />
-        ))}
+            <FeilKort
+              key={props.feilmeldinger.indexOf(feilMelding)}
+              tittel={feilMelding.tittel}
+              beskrivelse={feilMelding.beskrivelse}
+              dato={new Date()}
+            />         
+            ))
+          }
       </div>
-    </div>
   );
 };
 
diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilCard.tsx
index 95b8c4a..fc1542e 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilCard.tsx
@@ -1,24 +1,8 @@
 import "@navikt/ds-css";
-import { Button, Heading, Tag } from "@navikt/ds-react";
+import { Heading, Tag } from "@navikt/ds-react";
 import { IFeilmelding } from "../interface";
-import { createContext, useContext, useState } from "react";
-import { XMarkIcon } from "@navikt/aksel-icons";
-
-/**
- * Kontekst som brukes for å vise og skjule FullvisningsKort-komponentet.
- * 
- * @param visHeleKortet en boolean som bestemmer om FullvisningsKort-komponentet skal vises eller ikke. 
- * True viser komponentet, false skjuler komponentet.
- * 
- * @param setVisHeleKortet en state-funksjon som endrer visHeleKortet. 
- * Gjør det mulig å endre visningsmodus fra andre komponenter en bare provider (Feilcard).
- */
-const visningsContext = createContext({
-    visHeleKortet: false,
-    setVisHeleKortet: (value: boolean) => {}
-})
-
-
+import FeilModal from "./FeilModal";
+import { useState } from "react";
 
 /**
  * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@@ -27,69 +11,60 @@ const visningsContext = createContext({
  * @param dato
  * @returns JSX komponent som beskriver innholdet i feilmeldinger.
  */
-export const FeilKort = (props: IFeilmelding) => {
-    const [visHeleKortet, setVisHeleKortet] = useState(false)
-    const visningsModus = {visHeleKortet, setVisHeleKortet}
 
+interface IFeilKort extends IFeilmelding {
+    key: number
+}
+export const FeilKort = (props: IFeilKort) => {
+    const [visModal, setVisModal] = useState<boolean>(false)
+    
     return(
-        <visningsContext.Provider value={visningsModus}>
-            <div className="
+        <>
+            <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={() => {
-                    setVisHeleKortet(true)
-                }}>
-                <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} haster={false} dato={props.dato}/>
-                <FullvisningsKort tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
+                active:bg-surface-active"
+                onClick={() => setVisModal(true)}
+            >
+                <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
             </div>
-        </visningsContext.Provider>
+            { visModal ? 
+                <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> : null
+            } 
+        </>
     )
 }
 
-
-
 /**
- * Fullvisningskortet er en komponent som viser all informasjon om en feilmelding.
- * Alle brukere skal ikke ha tilgang til denne informasjonen, visningen av komponentet er derfor avhengig av en kontekst.
- * dersom visHeleKortet er true vises komponentet, ellers vises ikke komponentet og det returneres react fragmenter.
+ * 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 beskriver innholdet i feilmeldinger.
+ * @returns JSX komponent som skal vise nødvendig informasjon for å forstå en feil.
  */
-const FullvisningsKort = (props: IFeilmelding) => {
-    const {visHeleKortet, setVisHeleKortet} = useContext(visningsContext)
+export const FeilkortHeader = (props: IFeilmelding) => {
     return(
-         visHeleKortet ? 
-            <div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
-                <div className="w-full h-full flex justify-center items-center">
-                    <div className="bg-bg-default border border-border-default p-7 rounded-lg w-1/2">
-                        <div className="flex justify-between gap-4">
-                            <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
-                            <Button
-                                icon={<XMarkIcon/>}
-                                className="max-h-14 min-w-fit"
-                                variant="secondary"
-                                onClick={(e) => {
-                                    e.stopPropagation()
-                                    setVisHeleKortet(false)
-                                }}
-                            >
-                                Lukk
-                            </Button>                            
-                        </div>
-                        <div className="h-1 bg-bg-subtle w-full my-4"></div>
-                    </div>                    
-                </div>
-            </div> 
-        : <></>
+        <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
 }
@@ -109,25 +84,3 @@ const TagBar = (props: TagBarInterface) => {
 
 
 
-/**
- * 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.
- */
-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>
-    )
-}
\ No newline at end of file
diff --git a/frontend/src/components/FeilModal.tsx b/frontend/src/components/FeilModal.tsx
new file mode 100644
index 0000000..9901257
--- /dev/null
+++ b/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;
\ No newline at end of file