Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
AudunSorheim committed Nov 29, 2023
1 parent e02293e commit f187784
Show file tree
Hide file tree
Showing 9 changed files with 96 additions and 49 deletions.
26 changes: 0 additions & 26 deletions src/components/accordion/AccordionItem.tsx

This file was deleted.

19 changes: 0 additions & 19 deletions src/components/accordion/ComponentHeader.tsx

This file was deleted.

50 changes: 50 additions & 0 deletions src/components/header/ComponentHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { BodyLong, Heading } from "@navikt/ds-react";
import React from "react";
import { getShortDateFormat } from "@/utils/dateUtils";
import {
CheckmarkCircleFillIcon,
ExclamationmarkTriangleFillIcon,
InformationSquareFillIcon,
XMarkOctagonFillIcon,
} from "@navikt/aksel-icons";
import styles from "./componentheader.module.css";

interface Props {
headerText: string;
alertStyle: "info" | "success" | "warning" | "error";
createdAt: string;
}

export const ComponentHeader = ({
headerText,
alertStyle,
createdAt,
}: Props) => {
return (
<div className="mb-4">
<div className="flex flex-row mb-4 space-between">
<Heading size="large" level="1">
{headerText}
</Heading>
<>
{alertStyle === "info" && (
<InformationSquareFillIcon className={styles.infoIcon} />
)}
{alertStyle === "warning" && (
<ExclamationmarkTriangleFillIcon className={styles.warningIcon} />
)}
{alertStyle === "success" && (
<CheckmarkCircleFillIcon className={styles.successIcon} />
)}
{alertStyle === "error" && (
<XMarkOctagonFillIcon className={styles.errorIcon} />
)}
</>
</div>

<BodyLong textColor="subtle">
Utsendt {getShortDateFormat(createdAt)}
</BodyLong>
</div>
);
};
34 changes: 34 additions & 0 deletions src/components/header/componentheader.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.roundedIcon {
align-self: flex-start;
flex-shrink: 0;
font-size: 2rem;
height: 30px;
background: radial-gradient(
circle at 50% 57%,
var(--a-surface-default) 32%,
0,
transparent
);
margin-top: 0.2rem;
margin-left: auto;
}
.infoIcon {
composes: roundedIcon;
color: var(--a-icon-info);
}

.warningIcon {
composes: roundedIcon;
color: var(--a-icon-warning);
}

.successIcon {
composes: roundedIcon;
color: var(--a-icon-success);
}

.errorIcon {
composes: roundedIcon;
color: var(--a-icon-danger);
}

3 changes: 2 additions & 1 deletion src/components/view/ForhandsvarselComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { BodyLong, Heading, Link, Tag } from "@navikt/ds-react";
import React, { useEffect } from "react";
import { post } from "@/data/api";
import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
import { ComponentHeader } from "@/components/accordion/ComponentHeader";
import { ComponentHeader } from "@/components/header/ComponentHeader";
import { getShortDateFormat } from "@/utils/dateUtils";

interface Props {
Expand Down Expand Up @@ -36,6 +36,7 @@ export const ForhandsvarselComponent = ({ vurdering }: Props) => {
key={index}
headerText={text}
createdAt={vurdering.createdAt}
alertStyle="warning"
/>
))}
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/view/MottattVurderingComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import React from "react";
import { ComponentHeader } from "@/components/accordion/ComponentHeader";
import { ComponentHeader } from "@/components/header/ComponentHeader";
import { BodyLong, Tag } from "@navikt/ds-react";
import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
import { getShortDateFormat } from "@/utils/dateUtils";
Expand All @@ -16,6 +16,7 @@ export const MottattVurderingComponent = ({ vurdering }: Props) => {
<ComponentHeader
headerText={"NAV har vurdert aktivitetsplikten din"}
createdAt={vurdering.createdAt}
alertStyle="success"
/>

<div className="flex flex-col gap-4">
Expand Down
3 changes: 2 additions & 1 deletion src/components/view/UnderBehandlingComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useState } from "react";
import { MedUtenArbeidsgiverToggleGroup } from "@/components/view/aktivitetskravInfo/MedUtenArbeidsgiverToggleGroup";
import { AktivitetskravInfo } from "@/components/view/aktivitetskravInfo/AktivitetskravInfo";
import { ComponentHeader } from "@/components/accordion/ComponentHeader";
import { ComponentHeader } from "@/components/header/ComponentHeader";
import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";

export type MedUtenAGVisning = "MED_ARBEIDSGIVER" | "UTEN_ARBEIDSGIVER";
Expand All @@ -20,6 +20,7 @@ export const UnderBehandlingComponent = ({ vurdering }: Props) => {
<ComponentHeader
headerText={infoSideHeaderText}
createdAt={vurdering.createdAt}
alertStyle="info"
/>

<MedUtenArbeidsgiverToggleGroup setVisning={setVisning} />
Expand Down
3 changes: 2 additions & 1 deletion src/components/view/ikkeOppfylt/IkkeOppfyltComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import React from "react";
import {ComponentHeader} from "@/components/accordion/ComponentHeader";
import {ComponentHeader} from "@/components/header/ComponentHeader";
import {BodyLong} from "@navikt/ds-react";
import {AktivitetskravVurdering} from "@/schema/aktivitetskravVurderingSchema";

Expand All @@ -14,6 +14,7 @@ export const IkkeOppfyltComponent = ({ vurdering }: Props) => {
<ComponentHeader
headerText={"Svarfristen har gått ut"}
createdAt={vurdering.createdAt}
alertStyle="warning"
/>

<div className="flex flex-col gap-4">
Expand Down
4 changes: 4 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ const config: Config = {
colors: {
'ds-gray-50': '#f7f7f7',
'header-color': '#d1eff9',
'aksel-info-color': 'var(--ac-alert-icon-info-color, var(--a-icon-info))',
'aksel-warning-color': 'var(--ac-alert-icon-warning-color, var(--a-icon-warning))',
'aksel-success-color': 'var(--ac-alert-icon-success-color, var(--a-icon-success))',
'aksel-error-color': 'var(--ac-alert-icon-error-color, var(--a-icon-danger))',
},
},
},
Expand Down

0 comments on commit f187784

Please sign in to comment.