Skip to content
This repository was archived by the owner on Jan 30, 2025. It is now read-only.

Commit 26e7d28

Browse files
atlenoatleno
authored
Redesign av varsel
1 parent 3290550 commit 26e7d28

File tree

10 files changed

+211
-165
lines changed

10 files changed

+211
-165
lines changed

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="no">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Mikrofrontend</title>
7-
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/3.1.3/index.min.css" as="style" />
8-
<link rel="stylesheet" href="https://cdn.nav.no/aksel/@navikt/ds-css/3.1.3/index.min.css" />
7+
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/5.15.1/index.min.css" as="style" />
8+
<link rel="stylesheet" href="https://cdn.nav.no/aksel/@navikt/ds-css/5.15.1/index.min.css" />
99
</head>
1010
<body>
1111
<div id="root"></div>

‎mock/endpoint.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default [
3737
isMasked: false,
3838
eksternVarslingSendt: false,
3939
eksternVarslingKanaler: ["SMS", "EPOST"],
40+
link: "www.nav.no"
4041
},
4142
{
4243
eventId: "1584093197470",

‎package-lock.json‎

Lines changed: 38 additions & 52 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"dependencies": {
1414
"@amplitude/analytics-browser": "2.3.8",
1515
"@nanostores/react": "^0.7.1",
16-
"@navikt/ds-icons": "3.4.3",
17-
"@navikt/ds-react": "5.7.0",
16+
"@navikt/aksel-icons": "5.15.1",
17+
"@navikt/ds-react": "5.15.1",
1818
"dayjs": "1.11.10",
1919
"react": "18.2.0",
2020
"react-dom": "18.2.0",

‎src/assets/BeskjedIkon.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/assets/OppgaveIkon.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/components/varsel/TidligereVarsel.tsx‎

Lines changed: 66 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { BodyLong, Link, Tag } from "@navikt/ds-react";
1+
import { ChatFillIcon, ChatIcon, CheckmarkCircleIcon, ChevronRightIcon } from "@navikt/aksel-icons";
2+
import { BodyLong, BodyShort } from "@navikt/ds-react";
23
import { useContext } from "react";
3-
import BeskjedIkon from "../../assets/BeskjedIkon";
4-
import OppgaveIkon from "../../assets/OppgaveIkon";
54
import text from "../../language/text";
65
import { Language, LanguageContext } from "../../provider/LanguageProvider";
6+
import { logNavigereBeskjed } from "../../utils/amplitude";
77
import { formatToReadableDate } from "../../utils/date";
88
import { Varsel } from "./Varsel";
99
import styles from "./Varsel.module.css";
10-
import { logNavigereBeskjed } from "../../utils/amplitude";
1110

1211
const getVarsletPaa = (kanaler: string[], language: Language) => {
1312
if (kanaler.includes("SMS") && kanaler.includes("EPOST")) {
@@ -27,39 +26,73 @@ function TidligereVarsel({ varselData }: { varselData: Varsel }) {
2726

2827
const eksternVarslingStatus = getVarsletPaa(varselData.eksternVarslingKanaler, language);
2928

30-
return (
31-
<div className={styles.varselWrapper}>
32-
{varselData.isMasked || isOppgave || !varselData.link ? (
33-
<BodyLong aria-label={varselData.isMasked ? maskedAriaLabel : undefined} className={styles.varselHeading}>
34-
<span aria-hidden={varselData.isMasked ? true : undefined}>
35-
{varselData.isMasked ? maskedText : varselData.tekst}
36-
</span>
37-
</BodyLong>
29+
const VarselHeader = (
30+
<div className={styles.header}>
31+
{isOppgave ? (
32+
<>
33+
<div className={styles.iconWrapper}>
34+
<CheckmarkCircleIcon className={styles.icon} aria-hidden />
35+
</div>
36+
<BodyShort>{text.filterToggleItemOppgave[language]}</BodyShort>
37+
</>
3838
) : (
39-
<Link
40-
onClick={logNavigereBeskjed}
41-
href={varselData.link}
42-
aria-label={varselData.isMasked ? maskedAriaLabel : undefined}
43-
className={styles.varselHeading}
44-
>
45-
<span aria-hidden={varselData.isMasked ? true : undefined}>
46-
{varselData.isMasked ? maskedText : varselData.tekst}
47-
</span>
48-
</Link>
39+
<>
40+
{varselData.link ? (
41+
<div className={`${styles.iconWrapper} ${styles.iconClickable}`}>
42+
<ChatFillIcon className={styles.icon} color="white" aria-hidden />
43+
</div>
44+
) : (
45+
<div className={styles.iconWrapper}>
46+
<ChatIcon className={styles.icon} aria-hidden />
47+
</div>
48+
)}
49+
<BodyShort className={!varselData.link ? styles.secondaryText : ""}>
50+
{text.filterToggleItemBeskjed[language]}
51+
</BodyShort>
52+
</>
4953
)}
50-
<div className={styles.varselMetaData}>
51-
{isOppgave ? <OppgaveIkon /> : <BeskjedIkon />}
52-
<Tag className={styles.tag} variant="neutral" size="small">{`${
53-
text.varselMottatt[language]
54-
} ${formatToReadableDate(varselData.forstBehandlet)}`}</Tag>
55-
{eksternVarslingStatus && (
56-
<Tag variant="neutral" size="small" className={`${styles.tag} ${styles.eksternVarslingStatus}`}>
57-
{eksternVarslingStatus}
58-
</Tag>
59-
)}
60-
</div>
6154
</div>
6255
);
56+
57+
const VarselFooter = (
58+
<BodyShort size="small" className={`${styles.footer} ${styles.secondaryText}`}>
59+
{formatToReadableDate(varselData.forstBehandlet)}
60+
{eksternVarslingStatus && ` - ${eksternVarslingStatus}`}
61+
</BodyShort>
62+
);
63+
64+
if (varselData.isMasked) {
65+
return (
66+
<div className={styles.varselContainer}>
67+
{VarselHeader}
68+
<BodyLong aria-label={maskedAriaLabel} className={styles.title}>
69+
<span aria-hidden={true}>{maskedText}</span>
70+
</BodyLong>
71+
{VarselFooter}
72+
</div>
73+
);
74+
} else if (varselData.link && !isOppgave) {
75+
return (
76+
<a onClick={logNavigereBeskjed} href={varselData.link} className={styles.link}>
77+
<div className={styles.varselContainer}>
78+
{VarselHeader}
79+
<div className={styles.clickableTitleContainer}>
80+
<BodyLong className={styles.linkText}>{varselData.tekst}</BodyLong>
81+
<ChevronRightIcon fontSize="24px" className={styles.chevron} />
82+
</div>
83+
{VarselFooter}
84+
</div>
85+
</a>
86+
);
87+
} else {
88+
return (
89+
<div className={styles.varselContainer}>
90+
{VarselHeader}
91+
<BodyLong>{varselData.tekst}</BodyLong>
92+
{VarselFooter}
93+
</div>
94+
);
95+
}
6396
}
6497

6598
export default TidligereVarsel;

0 commit comments

Comments
 (0)