💄Fjernet blå bakgrunn på feilmeldingsgrid, gjorde innmelding av feil lavere og tittel+beskrivelse props på FeilCard

This commit is contained in:
Markus Johansen 2023-07-13 15:43:28 +02:00
parent c52f91bc7b
commit e29fef96cf
4 changed files with 18 additions and 19 deletions

View file

@ -11,7 +11,7 @@ const BildeOpplastning = () => {
return(
<div className="flex gap-2 flex-col">
<div className="
h-64 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2
">
{/*

View file

@ -8,17 +8,11 @@ import FeilCard from "./FeilCard";
const CardsContainer = () => {
return(
<div>
<div className="bg-red-500 grid grid-cols-2 gap-4">
<FeilCard />
<FeilCard />
<FeilCard />
<FeilCard />
</div>
<div className="bg-blue-500 flex flex-row flex-wrap gap-4">
<FeilCard />
<FeilCard />
<FeilCard />
<FeilCard />
<div className="grid grid-cols-2 gap-4">
<FeilCard tittel="Mangel på hensyn til tariffoppgjør" beskrivelse="Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)"/>
<FeilCard tittel="Speil sier NAV må tilbakekreve sykepenger på feil grunnlag" beskrivelse="baluba"/>
<FeilCard tittel="Feil A" beskrivelse="Dette er Feil fordi x, y, z"/>
<FeilCard tittel="Feil B" beskrivelse="Lorem Ipsum"/>
</div>
</div>

View file

@ -1,9 +1,14 @@
import "@navikt/ds-css";
import { ExpansionCard, Tag } from "@navikt/ds-react";
interface feilmeldingInterface {
tittel: String,
beskrivelse: String
}
const TagBar = () => {
return (
<div className="flex gap-8">
<div className="flex gap-8 mt-4">
<Tag variant="info">Jobbes med</Tag>
<div className="flex gap-2">
<Tag variant="neutral">Spleiselaget</Tag>
@ -13,13 +18,13 @@ const TagBar = () => {
)
}
const FeilCard = () => {
const FeilCard = (props: feilmeldingInterface) => {
return (
<ExpansionCard aria-label="tekst">
<ExpansionCard.Header>
<ExpansionCard.Title>Dummy</ExpansionCard.Title>
<ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
<ExpansionCard.Description>
Dummy Dummy Java
{props.beskrivelse}
</ExpansionCard.Description>
<TagBar />
</ExpansionCard.Header>

View file

@ -28,8 +28,8 @@ export default function Feil() {
<Header/>
<div className="flex grow">
<div className="w-1/4 bg-bg-subtle"></div>
<div className="flex flex-col justify-center gap-32 p-16 grow">
<div className="w-1/2 flex flex-col gap-4 justify-center">
<div className="flex flex-col justify-center gap-16 p-8 px-16 grow">
<div className=" flex flex-col gap-2 justify-center">
<BugIcon
title="Insekts ikon"
fontSize="3rem"