✨ Popup er byttet ut mot AkselModal
This commit is contained in:
Markus Johansen
parent
545d64da8c
commit
413a6277f4
3 changed files with 74 additions and 95 deletions
|
|
@ -10,8 +10,8 @@ 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
|
||||
|
|
@ -20,8 +20,8 @@ const CardsContainer = (props: ICardsContainer) => {
|
|||
beskrivelse={feilMelding.beskrivelse}
|
||||
dato={new Date()}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
<div className="h-1 bg-bg-subtle w-full my-4"></div>
|
||||
<TagBar haster={false}/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
26
frontend/src/components/FeilModal.tsx
Normal file
26
frontend/src/components/FeilModal.tsx
Normal file
|
|
@ -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;
|
||||
Reference in a new issue