Endre tekst + pipe i SakPageHeader

navikt · Apr 2, 2024 · 4b144d5 · 4b144d5
1 parent 8b29b2d
commit 4b144d5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/apps/dine-pleiepenger/src/components/page-layout/sak-page-header/SakPageHeader.tsx b/apps/dine-pleiepenger/src/components/page-layout/sak-page-header/SakPageHeader.tsx
@@ -18,11 +18,13 @@ const SakPageHeader: React.FunctionComponent<Props> = ({ tittel, titleTag, saksn
             byline={
                 <BodyShort as="div">
                     <HStack gap="2">
-                        <span className="uppercase">
+                        <span>
                             <Msg id="sakPageHeader.saksnr" values={{ saksnr }} />
                         </span>
-                        <span aria-hidden={true}>|</span>
-                        <span className="text-text-subtle">{navn}</span>
+                        <span aria-hidden={true} className="sakPageHeaderPipe">
+                            |
+                        </span>
+                        <Msg id="sakPageHeader.pleietrengende" values={{ navn }} />
                     </HStack>
                 </BodyShort>
             }

diff --git a/apps/dine-pleiepenger/src/components/page-layout/sak-page-header/sakPageHeader.css b/apps/dine-pleiepenger/src/components/page-layout/sak-page-header/sakPageHeader.css
@@ -0,0 +1,8 @@
+.sakPageHeaderPipe {
+    display: none;
+}
+@media screen and (min-width: 480px) {
+    .sakPageHeaderPipe {
+        display: inline;
+    }
+}
diff --git a/apps/dine-pleiepenger/src/i18n/nb.ts b/apps/dine-pleiepenger/src/i18n/nb.ts
@@ -96,7 +96,8 @@ export const nb = {
     'kontaktOss.ringOssInfo': 'Åpent hverdager kl. 9–15. Vi kan ringe deg tilbake hvis ventetiden er over 5 min.',
     'kontaktOss.ringOssSeTelefonnummer': 'Se flere telefonnummer og tastevalg',
 
-    'sakPageHeader.saksnr': 'Saksnr {saksnr}',
+    'sakPageHeader.saksnr': 'Saksnummer: {saksnr}',
+    'sakPageHeader.pleietrengende': 'Pleietrengende: {navn}',
     'sakPageHeader.defaultTittel': 'Din pleiepengesak',
 
     'pdfLenke.lenke': '{tittel} (PDF)',

diff --git a/apps/dine-pleiepenger/src/style/global.css b/apps/dine-pleiepenger/src/style/global.css
@@ -2,6 +2,7 @@
 @import '@navikt/ds-css';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import '../components/page-layout/sak-page-header/sakPageHeader.css';
 
 .contentWrapper {
     margin-left: calc((100vw - 100%) / -2);