Justering i design for Modia

navikt · Dec 9, 2024 · 9e8b8a4 · 9e8b8a4
1 parent 98e120c
commit 9e8b8a4
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 108 deletions.
diff --git a/frontend/frontend-common/components/containers/LokalInformasjonContainer.module.scss b/frontend/frontend-common/components/containers/LokalInformasjonContainer.module.scss
diff --git a/frontend/frontend-common/components/containers/LokalInformasjonContainer.tsx b/frontend/frontend-common/components/containers/LokalInformasjonContainer.tsx
@@ -1,6 +1,10 @@
 import { PropsWithChildren } from "react";
-import styles from "./LokalInformasjonContainer.module.scss";
+import { Box } from "@navikt/ds-react";
 
 export function LokalInformasjonContainer(props: PropsWithChildren) {
-  return <div className={styles.lokal_informasjon_container}>{props.children}</div>;
+  return (
+    <Box background="bg-subtle" padding={"5"}>
+      {props.children}
+    </Box>
+  );
 }
diff --git a/...d/mulighetsrommet-veileder-flate/src/components/oversikt/ArbeidsmarkedstiltakListItem.tsx b/...d/mulighetsrommet-veileder-flate/src/components/oversikt/ArbeidsmarkedstiltakListItem.tsx
@@ -49,7 +49,7 @@ export function ArbeidsmarkedstiltakListItem({ tiltak, index, delMedBruker }: Pr
         harDeltMedBruker: styles.list_element_border,
       })}
       id={`list_element_${index}`}
-      data-testid={`tiltaksgjennomforing_${kebabCase(tiltak.tittel)}`}
+      data-testid={`tiltaksgjennomforing_${kebabCase(tiltak.underTittel)}`}
     >
       <Lenke to={`../tiltak/${id}${paginationUrl}`}>
         {datoSidenSistDelt ? (

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/tabs/TiltakDetaljerFane.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/tabs/TiltakDetaljerFane.tsx
@@ -1,9 +1,9 @@
+import { PortableTextTypedObject } from "@mr/api-client";
+import { LokalInformasjonContainer } from "@mr/frontend-common";
 import { Alert, BodyLong, Heading } from "@navikt/ds-react";
+import { RedaksjoneltInnhold } from "../RedaksjoneltInnhold";
 import styles from "./TiltakDetaljerFane.module.scss";
 import { TiltakDetaljerFaneContainer } from "./TiltakDetaljerFaneContainer";
-import { RedaksjoneltInnhold } from "../RedaksjoneltInnhold";
-import { LokalInformasjonContainer } from "@mr/frontend-common";
-import { PortableTextTypedObject } from "@mr/api-client";
 
 interface DetaljerFaneProps {
   tiltaksgjennomforingAlert?: string;
@@ -25,15 +25,12 @@ export function TiltakDetaljerFane({
         !!tiltaksgjennomforingAlert || !!tiltakstypeAlert || !!tiltaksgjennomforing || !!tiltakstype
       }
     >
-      <Heading level="2" size="small">
-        Generell informasjon
-      </Heading>
       {tiltakstypeAlert && (
         <Alert variant="info" style={{ whiteSpace: "pre-wrap" }}>
           {tiltakstypeAlert}
         </Alert>
       )}
-      <BodyLong as="div" size="small">
+      <BodyLong as="div" size="large">
         <RedaksjoneltInnhold value={tiltakstype} />
       </BodyLong>
       {(tiltaksgjennomforing || tiltaksgjennomforingAlert) && (
@@ -46,7 +43,7 @@ export function TiltakDetaljerFane({
               {tiltaksgjennomforingAlert}
             </Alert>
           )}
-          <BodyLong as="div" textColor="subtle" size="small">
+          <BodyLong as="div" size="large">
             <RedaksjoneltInnhold value={tiltaksgjennomforing} />
           </BodyLong>
         </LokalInformasjonContainer>

diff --git a/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.module.scss b/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.module.scss
diff --git a/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.tsx b/frontend/mulighetsrommet-veileder-flate/src/layouts/TiltakHeader.tsx
@@ -1,8 +1,7 @@
 import { VeilederflateTiltak } from "@mr/api-client";
 import { isTiltakAktivt } from "@/api/queries/useArbeidsmarkedstiltakById";
 import { GjennomforingStatusTag } from "@mr/frontend-common";
-import { BodyLong, Heading, HStack, VStack } from "@navikt/ds-react";
-import styles from "./TiltakHeader.module.scss";
+import { BodyLong, BodyShort, Heading, HStack, VStack } from "@navikt/ds-react";
 
 interface Props {
   tiltak: VeilederflateTiltak;
@@ -12,27 +11,32 @@ export function TiltakHeader({ tiltak }: Props) {
   const { beskrivelse, tiltakstype } = tiltak;
   return (
     <>
-      <HStack align="center" gap="2" className={styles.tiltaksgjennomforing_title}>
-        <Heading level="1" size="xlarge">
-          <VStack>
-            {tiltak.tittel}
-            <BodyLong size="medium" textColor="subtle">
-              {tiltak.underTittel}
-            </BodyLong>
-          </VStack>
+      <VStack gap="2">
+        <Heading level="2" size="xlarge">
+          <BodyShort spacing size="small" textColor="default">
+            {tiltak.underTittel}
+          </BodyShort>
         </Heading>
-        {!isTiltakAktivt(tiltak) && <GjennomforingStatusTag status={tiltak.status} />}
-      </HStack>
-      {tiltakstype.beskrivelse && (
-        <BodyLong size="large" className={styles.beskrivelse} style={{ whiteSpace: "pre-wrap" }}>
-          {tiltakstype.beskrivelse}
-        </BodyLong>
-      )}
+        <HStack gap={"2"} align="center">
+          <Heading size="large">{tiltak.tittel}</Heading>
+          {isTiltakAktivt(tiltak) && <GjennomforingStatusTag status={tiltak.status} />}
+        </HStack>
+      </VStack>
       {beskrivelse && (
-        <BodyLong style={{ whiteSpace: "pre-wrap" }} textColor="subtle" size="medium">
+        <BodyLong size="large" spacing style={{ whiteSpace: "pre-wrap" }}>
           {beskrivelse}
         </BodyLong>
       )}
+      {tiltakstype.beskrivelse && (
+        <VStack gap={"0"} style={{ marginTop: "1rem" }}>
+          <Heading level="2" size="small" textColor="subtle">
+            Generell info
+          </Heading>
+          <BodyLong size="large" style={{ whiteSpace: "pre-wrap" }}>
+            {tiltakstype.beskrivelse}
+          </BodyLong>
+        </VStack>
+      )}
     </>
   );
 }
diff --git a/frontend/mulighetsrommet-veileder-flate/src/mock/fixtures/mockTiltaksgjennomforinger.ts b/frontend/mulighetsrommet-veileder-flate/src/mock/fixtures/mockTiltaksgjennomforinger.ts
@@ -116,8 +116,8 @@ export const tiltakAvklaring: VeilederflateTiltakGruppe = {
 export const tiltakMentor: VeilederflateTiltakEnkeltplass = {
   type: "TILTAK_ENKELTPLASS",
   sanityId: "91205ff2-ec72-4a7f-80b8-1c99d8535a06",
-  tittel: "Mentor",
-  underTittel: "Sindres mentorordning med Yoda",
+  underTittel: "Mentor",
+  tittel: "Sindres mentorordning med Yoda",
   status: TiltaksgjennomforingStatus.GJENNOMFORES,
   oppstart: TiltaksgjennomforingOppstartstype.LOPENDE,
   stedForGjennomforing: "Oslo",
@@ -169,7 +169,8 @@ export const tiltakAmoGruppe: VeilederflateTiltakGruppe = {
     ],
   },
   fylke: "0800",
-  beskrivelse: "Beskrivelse av gruppe amo tiltaket på gjennomføringsnivå.",
+  beskrivelse:
+    "Beskrivelse av gruppe amo tiltaket på gjennomføringsnivå. Her kommer det masse spennende informasjon om tiltaket.",
   kontaktinfo: {
     tiltaksansvarlige: [
       {
@@ -348,8 +349,8 @@ export const tiltakVta: VeilederflateTiltakGruppe = {
 export const tiltakJobbklubb: VeilederflateTiltakGruppe = {
   type: "TILTAK_GRUPPE",
   id: "ff887090-1ba8-47a4-a82f-6aaad488994e",
-  tittel: "Jobbklubb (med Lars Monsen)",
-  underTittel: "Jobbklubb",
+  underTittel: "Jobbklubb (med Lars Monsen)",
+  tittel: "Jobbklubb",
   status: TiltaksgjennomforingStatus.GJENNOMFORES,
   stedForGjennomforing: "Kautokeino",
   apentForPamelding: true,

diff --git a/frontend/mulighetsrommet-veileder-flate/tests/veilederflate.spec.ts b/frontend/mulighetsrommet-veileder-flate/tests/veilederflate.spec.ts
@@ -58,9 +58,9 @@ test.describe("Tiltaksoversikt", () => {
     await expect(rows).toHaveCount(5);
     await page.getByTestId("filter_sokefelt").fill("Mentor");
     await expect(rows).toHaveCount(1);
-    await expect(
-      page.getByTestId("tiltaksgjennomforing_mentor"),
-    ).toContainText("Mentor");
+    await expect(page.getByTestId("tiltaksgjennomforing_mentor")).toContainText(
+      "Sindres mentorordning med Yoda",
+    );
   });
 
   test("Skal vise 'Nullstill filter'-knapp når man filtrerer på innsatsgruppe", async ({

diff --git a/...tsrommet-api/src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/TiltaksnavnUtils.kt b/...tsrommet-api/src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/TiltaksnavnUtils.kt
@@ -1,59 +1,43 @@
 package no.nav.mulighetsrommet.api.veilederflate
 
-import no.nav.mulighetsrommet.domain.Tiltakskode
-import no.nav.mulighetsrommet.domain.Tiltakskoder.isKursTiltak
-
 object TiltaksnavnUtils {
     fun tittelOgUnderTittel(
         navn: String,
         tiltakstypeNavn: String,
-        tiltakskode: Tiltakskode,
-    ): Pair<String, String> = if (isKursTiltak(tiltakskode)) {
-        navn to tiltakstypeNavn
-    } else {
+    ): Pair<String, String> =
         tiltakstypeNavn to navn
-    }
+}
 
-    fun tittelOgUnderTittel(
-        navn: String,
-        tiltakstypeNavn: String,
-        arenaKode: String,
-    ): Pair<String, String> = if (arenaKode in listOf("ENKELAMO", "ENKFAGYRKE")) {
-        navn to tiltakstypeNavn
-    } else {
-        tiltakstypeNavn to navn
-    }
 
-    fun String.hosTitleCaseArrangor(arrangor: String?): String {
-        val casedArrangor = toTitleCase(arrangor ?: "")
+fun String.hosTitleCaseArrangor(arrangor: String?): String {
+    val casedArrangor = toTitleCase(arrangor ?: "")
 
-        return "${this}${if (casedArrangor.isNotBlank()) " hos $casedArrangor" else ""}"
-    }
+    return "${this}${if (casedArrangor.isNotBlank()) " hos $casedArrangor" else ""}"
+}
+
+private val FORKORTELSER_MED_STORE_BOKSTAVER = listOf(
+    "as",
+    "a/s",
+)
+
+private val ORD_MED_SMA_BOKSTAVER = listOf(
+    "i",
+    "og",
+)
+
+private fun toTitleCase(tekst: String): String {
+    return tekst.lowercase().split(Regex("(?<=\\s|-|')")).joinToString("") {
+        when (it.trim()) {
+            in FORKORTELSER_MED_STORE_BOKSTAVER -> {
+                it.uppercase()
+            }
+
+            in ORD_MED_SMA_BOKSTAVER -> {
+                it
+            }
 
-    private val FORKORTELSER_MED_STORE_BOKSTAVER = listOf(
-        "as",
-        "a/s",
-    )
-
-    private val ORD_MED_SMA_BOKSTAVER = listOf(
-        "i",
-        "og",
-    )
-
-    private fun toTitleCase(tekst: String): String {
-        return tekst.lowercase().split(Regex("(?<=\\s|-|')")).joinToString("") {
-            when (it.trim()) {
-                in FORKORTELSER_MED_STORE_BOKSTAVER -> {
-                    it.uppercase()
-                }
-
-                in ORD_MED_SMA_BOKSTAVER -> {
-                    it
-                }
-
-                else -> {
-                    it.replaceFirstChar(Char::uppercaseChar)
-                }
+            else -> {
+                it.replaceFirstChar(Char::uppercaseChar)
             }
         }
     }

diff --git a/.../src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/DelMedBrukerService.kt b/.../src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/DelMedBrukerService.kt
@@ -172,7 +172,6 @@ class DelMedBrukerService(
                     val (tittel, underTittel) = tittelOgUnderTittel(
                         tiltak.navn,
                         tiltak.tiltakstypeNavn,
-                        tiltak.tiltakskode,
                     )
 
                     TiltakDeltMedBruker(
@@ -208,7 +207,6 @@ class DelMedBrukerService(
             val (tittel, underTittel) = tittelOgUnderTittel(
                 tiltak.tiltaksgjennomforingNavn ?: "",
                 tiltak.tiltakstype.tiltakstypeNavn,
-                arenaKode,
             )
 
             deltMedBruker.filter { it.sanityId == tiltak._id.toUUID() }.map {

diff --git a/.../main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/TiltakshistorikkService.kt b/.../main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/TiltakshistorikkService.kt
@@ -11,8 +11,8 @@ import no.nav.mulighetsrommet.api.clients.amtDeltaker.DeltakelserRequest
 import no.nav.mulighetsrommet.api.clients.pdl.*
 import no.nav.mulighetsrommet.api.clients.tiltakshistorikk.TiltakshistorikkClient
 import no.nav.mulighetsrommet.api.tiltakstype.db.TiltakstypeRepository
-import no.nav.mulighetsrommet.api.veilederflate.TiltaksnavnUtils.hosTitleCaseArrangor
 import no.nav.mulighetsrommet.api.veilederflate.TiltaksnavnUtils.tittelOgUnderTittel
+import no.nav.mulighetsrommet.api.veilederflate.hosTitleCaseArrangor
 import no.nav.mulighetsrommet.api.veilederflate.models.Deltakelse
 import no.nav.mulighetsrommet.domain.dto.*
 import no.nav.mulighetsrommet.tokenprovider.AccessType
@@ -95,7 +95,6 @@ class TiltakshistorikkService(
         val (tittel) = tittelOgUnderTittel(
             deltakelse.beskrivelse,
             tiltakstype.navn,
-            tiltakstype.arenaKode,
         )
         Deltakelse.DeltakelseArena(
             id = deltakelse.id,
@@ -122,7 +121,6 @@ class TiltakshistorikkService(
         val (tittel) = tittelOgUnderTittel(
             deltakelse.gjennomforing.navn,
             tiltakstype.await().navn,
-            deltakelse.gjennomforing.tiltakskode,
         )
         Deltakelse.DeltakelseGruppetiltak(
             id = deltakelse.id,

diff --git a/...src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/VeilederflateService.kt b/...src/main/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/VeilederflateService.kt
@@ -211,7 +211,6 @@ class VeilederflateService(
         val (tittel, underTittel) = tittelOgUnderTittel(
             navn = gjennomforing.tiltaksgjennomforingNavn ?: "",
             tiltakstypeNavn = tiltakstype.navn,
-            arenaKode = tiltakstypeAdminDto.arenaKode,
         )
 
         val faneinnhold = gjennomforing.faneinnhold?.copy(delMedBruker = gjennomforing.delingMedBruker)

diff --git a/...mmet-api/src/test/kotlin/no/nav/mulighetsrommet/api/veilederflate/TiltaksnavnUtilsTest.kt b/...mmet-api/src/test/kotlin/no/nav/mulighetsrommet/api/veilederflate/TiltaksnavnUtilsTest.kt
@@ -3,7 +3,6 @@ package no.nav.mulighetsrommet.api.veilederflate
 import io.kotest.core.spec.style.FunSpec
 import io.kotest.matchers.shouldBe
 import no.nav.mulighetsrommet.api.tiltakstype.model.TiltakstypeDto
-import no.nav.mulighetsrommet.api.veilederflate.TiltaksnavnUtils.hosTitleCaseArrangor
 import no.nav.mulighetsrommet.domain.Tiltakskode
 import no.nav.mulighetsrommet.domain.dto.TiltakstypeStatus
 import java.time.LocalDate

diff --git a/.../test/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/DelMedBrukerServiceTest.kt b/.../test/kotlin/no/nav/mulighetsrommet/api/veilederflate/services/DelMedBrukerServiceTest.kt
@@ -196,7 +196,7 @@ class DelMedBrukerServiceTest : FunSpec({
                 it.shouldNotBeNull()
                 it.size shouldBe 3
                 it[0].tittel shouldBe "Oppfølging"
-                it[1].tittel shouldBe "Delt med bruker - Lokalt navn fra Sanity"
+                it[1].tittel shouldBe "Arbeidsmarkedsopplæring (AMO) enkeltplass"
                 it[2].tittel shouldBe "Arbeidstrening"
             }
         }