Ny brødsmulesti

src/Pages/Artikkel/Artikkel.tsx

@@ -127,15 +127,7 @@ export const Artikkel = () => {
 
     return (
         <>
-            <Brodsmulesti
-                brodsmuler={[
-                    {
-                        url: `/artikkel/${id}`,
-                        title: tittel,
-                        handleInApp: true,
-                    },
-                ]}
-            />
+            <Brodsmulesti/>
             <ArtikkelBanner tittel={tittel} />
             <div
                 className={'artikkel-container'}

src/Pages/Banner.css

@@ -33,4 +33,17 @@
 
 .banner__saksoversikt__tittel {
     grid-area: tittel;
+}
+
+.brodsmulesti {
+    display: flex;
+    background: var(--a-bg-default);
+    padding: 16px 32px;
+    font-size: 1.125rem;
+    align-items: center;
+}
+.brodsmulesti svg {
+    color: var(--a-text-default);
+    width: 32px;
+    height: 32px;
 }

src/Pages/Banner.tsx

@@ -5,10 +5,11 @@ import { OrganisasjonsDetaljerContext } from './OrganisasjonDetaljerProvider';
 import { OrganisasjonerOgTilgangerContext } from './OrganisasjonerOgTilgangerProvider';
 import * as Record from '../utils/Record';
 import { NotifikasjonWidget } from '@navikt/arbeidsgiver-notifikasjon-widget';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { onBreadcrumbClick, setBreadcrumbs } from '@navikt/nav-dekoratoren-moduler';
+import { useSearchParams } from 'react-router-dom';
 import { Heading, Loader } from '@navikt/ds-react';
 import './Banner.css';
+import { LenkeMedLogging } from '../GeneriskeElementer/LenkeMedLogging';
+import { HouseIcon } from '@navikt/aksel-icons';
 
 interface OwnProps {
     sidetittel?: string;
@@ -17,19 +18,7 @@ interface OwnProps {
 export const SimpleBanner: FunctionComponent<OwnProps> = ({
     sidetittel = 'Min side – arbeidsgiver',
 }) => {
-    useEffect(() => {
-        setBreadcrumbs([
-            {
-                url: 'https://arbeidsgiver.nav.no/min-side-arbeidsgiver',
-                title: 'Min side – arbeidsgiver',
-            },
-        ]).then(() => {});
-    }, []);
-    return (
-        <Bedriftsmeny
-            sidetittel={'Min side – arbeidsgiver'}
-        />
-    );
+    return <Bedriftsmeny sidetittel={'Min side – arbeidsgiver'} />;
 };
 
 export const SaksoversiktBanner = () => (
@@ -77,44 +66,24 @@ export const BannerMedBedriftsmeny: FunctionComponent<OwnProps> = ({ sidetittel
         : [];
 
     return (
-        <Bedriftsmeny
-            sidetittel={sidetittel}
-            organisasjoner={orgs}
-            orgnrSearchParam={useOrgnrHook}
-        >
+        <Bedriftsmeny sidetittel={sidetittel} organisasjoner={orgs} orgnrSearchParam={useOrgnrHook}>
             <NotifikasjonWidget />
         </Bedriftsmeny>
     );
 };
 
-interface Brodsmule {
-    url: string;
-    title: string;
-    handleInApp: boolean;
-}
-
-interface BrodsmuleProps {
-    brodsmuler: Brodsmule[];
-}
-
-export const Brodsmulesti = ({ brodsmuler }: BrodsmuleProps) => {
-    const navigate = useNavigate();
-
-    onBreadcrumbClick((breadcrumb) => {
-        navigate(breadcrumb.url);
-    });
-
-    const defaultBrodsmule: Brodsmule[] = [
-        { url: '/', title: 'Min side – arbeidsgiver', handleInApp: true },
-    ];
-
-    const breadcrumbs = defaultBrodsmule.concat(brodsmuler);
-
-    useEffect(() => {
-        setBreadcrumbs(breadcrumbs);
-    }, [JSON.stringify(brodsmuler)]);
-
-    return <></>;
+export const Brodsmulesti = () => {
+    return (
+        <div className="brodsmulesti">
+            <LenkeMedLogging
+                loggLenketekst={`Brødsmulesti - Min side - arbeidsgiver`}
+                href={__BASE_PATH__}
+            >
+                <HouseIcon title="a11y-title" fontSize="1.5rem" />
+                Min side – arbeidsgiver
+            </LenkeMedLogging>
+        </div>
+    );
 };
 
 export const Spinner = () => (

src/Pages/Hovedside/Hovedside.tsx

@@ -23,7 +23,6 @@ const Hovedside: FunctionComponent = () => {
 
     return (
         <div>
-            <Brodsmulesti brodsmuler={[]} />
             <div className="hovedside-container">
                 <AdvarselBannerTestversjon />
                 <Alerts />

src/Pages/OmVirksomheten/OmVirksomheten.tsx

@@ -5,7 +5,6 @@ import Underenhet from './Underenhet';
 import OverordnetEnhet from './OverordnetEnhet';
 import './OmVirksomheten.css';
 import { Box } from '@navikt/ds-react';
-import { Brodsmulesti } from '../Banner';
 
 const Kontaktpanel = ({ children }: { children: React.ReactNode }) => (
     <Box className="informasjon-om-bedrift">{children}</Box>
@@ -21,11 +20,6 @@ const OmVirksomheten: FunctionComponent = () => {
 
     return (
         <>
-            <Brodsmulesti
-                brodsmuler={[
-                    { url: '/bedriftsinformasjon', title: 'Om virksomheten', handleInApp: true },
-                ]}
-            />
             {overordnetenhet !== undefined && underenhet !== undefined ? (
                 <>
                     <Kontaktpanel>

src/Pages/Pages.tsx

@@ -63,6 +63,7 @@ const Pages: FunctionComponent = () => (
                                                 path="/bedriftsinformasjon"
                                                 element={
                                                     <>
+                                                        <Brodsmulesti/>
                                                         <BannerMedBedriftsmeny
                                                             sidetittel={'Om virksomheten'}
                                                         />
@@ -85,16 +86,8 @@ const Pages: FunctionComponent = () => (
                                                 path="/saksoversikt"
                                                 element={
                                                     <>
+                                                        <Brodsmulesti/>
                                                         <SaksoversiktBanner />
-                                                        <Brodsmulesti
-                                                            brodsmuler={[
-                                                                {
-                                                                    url: '/saksoversikt',
-                                                                    title: 'Saksoversikt',
-                                                                    handleInApp: true,
-                                                                },
-                                                            ]}
-                                                        />
                                                         <Saksoversikt />
                                                     </>
                                                 }
@@ -103,21 +96,8 @@ const Pages: FunctionComponent = () => (
                                                 path="/sak"
                                                 element={
                                                     <>
+                                                        <Brodsmulesti/>
                                                         <SaksoversiktBanner />
-                                                        <Brodsmulesti
-                                                            brodsmuler={[
-                                                                {
-                                                                    url: '/saksoversikt',
-                                                                    title: 'Saksoversikt',
-                                                                    handleInApp: true,
-                                                                },
-                                                                {
-                                                                    url: '/sak',
-                                                                    title: 'Sak',
-                                                                    handleInApp: true,
-                                                                },
-                                                            ]}
-                                                        />
                                                         <Saksside />
                                                     </>
                                                 }
@@ -128,7 +108,15 @@ const Pages: FunctionComponent = () => (
                                                     <Navigate to="/saksoversikt" replace={true} />
                                                 }
                                             />
-                                            <Route path="/artikkel/:id" element={<Artikkel />} />
+                                            <Route
+                                                path="/artikkel/:id"
+                                                element={
+                                                    <>
+                                                        <Brodsmulesti/>
+                                                        <Artikkel />
+                                                    </>
+                                                }
+                                            />
                                             <Route
                                                 path="*"
                                                 element={

src/mocks/brukerApi/resolvers.ts

@@ -79,3 +79,16 @@ export const sakstyperResolver = (sakstyper: Merkelapp[]) =>
 
         return HttpResponse.json({ errors, data });
     });
+
+export const hentSakByIdResolver = (saker: Sak[]) =>
+    graphql.query('HENT_SAK_ID', async ({ query, variables }) => {
+        const sak = saker[0];
+        return HttpResponse.json({
+            data: {
+                sakById: {
+                    sak,
+                    feilAltinn: false,
+                },
+            }
+        });
+    } );

src/mocks/handlers.ts

@@ -8,6 +8,7 @@ import {
     hentNotifikasjonerResolver,
     hentSakerResolver,
     sakstyperResolver,
+    hentSakByIdResolver,
 } from './brukerApi/resolvers';
 
 /**
@@ -220,4 +221,5 @@ export const handlers = [
     hentKalenderavtalerResolver([]),
     hentNotifikasjonerResolver([]),
     sakstyperResolver([]),
+    hentSakByIdResolver([])
 ];

src/mocks/scenarios/dagligLederScenario.ts

@@ -7,6 +7,7 @@ import {
     hentNotifikasjonerResolver,
     hentSakerResolver,
     sakstyperResolver,
+    hentSakByIdResolver,
 } from '../brukerApi/resolvers';
 import { alleSaker } from '../brukerApi/alleSaker';
 import { alleKalenderavtaler } from '../brukerApi/alleKalenderavtaler';
@@ -146,4 +147,5 @@ export const dagligLederScenario = [
     sakstyperResolver(alleSaker.map(({ merkelapp }) => merkelapp as Merkelapp)),
     hentKalenderavtalerResolver(alleKalenderavtaler),
     hentNotifikasjonerResolver(alleNotifikasjoner),
+    hentSakByIdResolver(alleSaker),
 ];

src/mocks/scenarios/nærmesteLederScenario.ts

@@ -4,7 +4,7 @@ import { faker } from '@faker-js/faker';
 import { fromEntries } from '../../utils/Record';
 import {
     hentKalenderavtalerResolver,
-    hentNotifikasjonerResolver,
+    hentNotifikasjonerResolver, hentSakByIdResolver,
     hentSakerResolver,
     sakstyperResolver,
 } from '../brukerApi/resolvers';
@@ -69,4 +69,5 @@ export const nærmesteLederScenario = [
     sakstyperResolver(nærmesteLederSaker.map(({ merkelapp }) => merkelapp as Merkelapp)),
     hentNotifikasjonerResolver(nærmesteLederNotifikasjoner),
     hentKalenderavtalerResolver(nærmesteLederKalenderavtaler),
+    hentSakByIdResolver(nærmesteLederSaker),
 ];

src/mocks/scenarios/regnskapsforerScenario.ts

@@ -7,7 +7,7 @@ import { alleSaker } from '../brukerApi/alleSaker';
 import { Merkelapp } from '../brukerApi/alleMerkelapper';
 import {
     hentKalenderavtalerResolver,
-    hentNotifikasjonerResolver,
+    hentNotifikasjonerResolver, hentSakByIdResolver,
     hentSakerResolver,
     sakstyperResolver,
 } from '../brukerApi/resolvers';
@@ -82,4 +82,5 @@ export const regnskapsforerScenario = [
     sakstyperResolver(regnskapsførerSaker.map(({ merkelapp }) => merkelapp as Merkelapp)),
     hentKalenderavtalerResolver(regnskapsførerKalenderavtaler),
     hentNotifikasjonerResolver(regnskapsførerNotifikasjoner),
+    hentSakByIdResolver(regnskapsførerSaker),
 ];