From 0294af28d46c2278e454c0dcd15a0d0b23448d70 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Fri, 28 Jul 2023 16:31:36 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feilkort=20som=20ikke=20er=20expans?=
 =?UTF-8?q?ioncards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CardsContainer.tsx | 12 +++++-
 frontend/src/components/FeilCard.tsx       | 50 ++++++++++++++--------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx
index 79f45fb..cf18d14 100644
--- a/frontend/src/components/CardsContainer.tsx
+++ b/frontend/src/components/CardsContainer.tsx
@@ -1,4 +1,4 @@
-import FeilCard from "./FeilCard";
+import { FeilCard } from "./FeilCard";
 import { Feilmelding } from "../interface.ts";
 
 interface ICardsContainer {
@@ -12,7 +12,15 @@ interface ICardsContainer {
 const CardsContainer = (props: ICardsContainer) => {
   return (
     <div>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-6">
+        {/* {props.feilmeldinger.map((feilMelding) => (
+          <FeilCard1
+            key={props.feilmeldinger.indexOf(feilMelding)}
+            tittel={feilMelding.tittel}
+            beskrivelse={feilMelding.beskrivelse}
+            dato={new Date()}
+          />
+        ))} */}
         {props.feilmeldinger.map((feilMelding) => (
           <FeilCard
             key={props.feilmeldinger.indexOf(feilMelding)}
diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilCard.tsx
index 45552a1..f67b197 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilCard.tsx
@@ -1,5 +1,5 @@
 import "@navikt/ds-css";
-import { ExpansionCard, Tag } from "@navikt/ds-react";
+import { Heading, Tag } from "@navikt/ds-react";
 import { IFeilmelding } from "../interface";
 
 interface TagBarInterface {
@@ -16,21 +16,37 @@ 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>
+// const FeilCard1 = (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 FeilCard1;
+
+export const FeilCard = (props: IFeilmelding) => {
+    return(
+        <div className="
+            bg-bg-default border border-border-default p-7 rounded-lg 
+            flex justify-between flex-col
+            hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
+            active:bg-surface-active
+            ">
+            <div>
+                <Heading size="medium">{props.tittel}</Heading>
+                <p>{props.beskrivelse}</p>       
+            </div>
+            <TagBar haster={false}/>
+        </div>
     )
 }
-
-export default FeilCard;