Merge pull request from navikt/nyttHome

Nytt home
This commit is contained in:
Sid 2023-07-19 17:24:23 +02:00 committed by GitHub
commit 3acfcb7ff7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 96 additions and 55 deletions

View file

@ -1,35 +1,35 @@
import FeilCard from "./FeilCard"
type FeilMelding = {
tittel: String
beskrivelse: String
}
/**
*
* @returns Komponent for returnering av konteiner med alle feilinnmeldingene.
*/
const CardsContainer = () => {
const feilMeldinger: FeilMelding[] = [
const feilMeldinger: Feilmelding[] = [
{
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)"
beskrivelse: "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)",
haster: false
},
{
tittel: "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag",
beskrivelse: "baluba"
beskrivelse: "baluba",
haster: true
},
{
tittel: "Feil A",
beskrivelse: "Lorem Ipsum"
beskrivelse: "Lorem Ipsum",
haster: false
},
{
tittel: "Feil B",
beskrivelse: "dolor"
beskrivelse: "dolor",
haster: false
},
{
tittel: "Håndkle på hue",
beskrivelse: "Bombastic side eye"
beskrivelse: "Bombastic side eye",
haster: true
}
]
@ -37,7 +37,12 @@ const CardsContainer = () => {
<div>
<div className="grid grid-cols-2 gap-4">
{feilMeldinger.map((feilMelding) => (
<FeilCard key={feilMelding.toString()} tittel={feilMelding.tittel} beskrivelse={feilMelding.beskrivelse}/>
<FeilCard
key={feilMeldinger.indexOf(feilMelding)}
tittel={feilMelding.tittel}
beskrivelse={feilMelding.beskrivelse}
haster={feilMelding.haster}
/>
))}
</div>
</div>

View file

@ -1,24 +1,21 @@
import "@navikt/ds-css";
import { ExpansionCard, Tag } from "@navikt/ds-react";
interface feilmeldingInterface {
tittel: String,
beskrivelse: String
interface TagBarInterface {
haster: boolean
}
const TagBar = () => {
//typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke
const TagBar = (props: TagBarInterface) => {
return (
<div className="flex gap-8 mt-4">
<Tag variant="info">Jobbes med</Tag>
<div className="flex gap-2">
<Tag variant="neutral">Spleiselaget</Tag>
<Tag variant="warning">Haster</Tag>
</div>
{props.haster === true ? <Tag variant="warning">Haster</Tag> : <></>}
</div>
)
}
const FeilCard = (props: feilmeldingInterface) => {
const FeilCard = (props: Feilmelding) => {
return (
<ExpansionCard aria-label="tekst">
<ExpansionCard.Header>
@ -26,7 +23,7 @@ const FeilCard = (props: feilmeldingInterface) => {
<ExpansionCard.Description>
{props.beskrivelse}
</ExpansionCard.Description>
<TagBar />
<TagBar haster={props.haster}/>
</ExpansionCard.Header>
<ExpansionCard.Content>
Hællæ

View file

@ -0,0 +1,46 @@
import { Accordion } from "@navikt/ds-react"
const Filtermeny = () => {
return (
<div className="bg-bg-default w-500">
<Accordion>
<Accordion.Item>
<Accordion.Header>
Kategori
</Accordion.Header>
<Accordion.Content>
Hvis du er mellom 62 og 67 år når du søker, du som hovedregel ha
hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>
Status
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
Prioritet
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
Mine innmeldinger
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
</Accordion>
</div>
)
}
export default Filtermeny

View file

@ -2,54 +2,34 @@ import CardsContainer from "./components/CardsContainer";
import "@navikt/ds-css";
import { Button, Heading, Search } from "@navikt/ds-react";
import Header from "./components/Header";
import { PlusIcon } from "@navikt/aksel-icons";
import Filtermeny from "./components/Filtermeny";
import { useNavigate } from "react-router-dom";
export default function Home() {
// const handleFeil = () => {
// router.push('/feil')
// }
const navigate = useNavigate()
const navigate = useNavigate()
return (
<main className="flex flex-col h-screen">
<Header/>
<div className="flex justify-center grow">
<div className="bg-bg-subtle w-1/6 p-8 flex flex-col justify-end">
<div className="flex flex-col gap-4 text-center bottom-0">
<div className="flex grow">
<Filtermeny/>
<div className="grow bg-bg-subtle px-32 py-10 flex flex-col gap-10">
<div className="flex gap-12 items-end">
<Search label="Søkefelt" hideLabel={false}/>
<Button
variant="primary"
// onClick={handleFeil}
onClick={() => navigate("nyfeil")}
className="w-64 h-min"
icon={<PlusIcon/>}
onClick={() => navigate("nyfeil")}
>
Meld inn feil
</Button>
<Button
variant="secondary"
>
Meld inn funksjonalitetsønsker
</Button>
</div>
</div>
<div className="p-8 grow flex gap-8 flex-col">
<Search
label="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
variant="primary"
hideLabel={false}
/>
<Heading
level="1"
size="medium"
>
Innmeldte feil (saker, feilmeldinger poster, feil)
</Heading>
<CardsContainer/>
</div>
<div className="bg-bg-subtle w-1/6 p-8">
<h1>Filter to be</h1>
</div>
</div>
</main>
)

10
frontend/src/interface.ts Normal file
View file

@ -0,0 +1,10 @@
/*
* I denne filen kan vi legge interfaces som skal brukes over flere steder!
*/
interface Feilmelding {
tittel: String,
beskrivelse: String
haster: boolean
}

View file

@ -293,7 +293,10 @@ module.exports = {
"large": "8px",
"xlarge": "12px",
"full": "9999px"
}
},
"width": {
"500": "500px",
},
}
},
plugins: [],