simplify context link (#389)

gammel html: ```html <div class="header-module__arbeidsflate"> <context-link href="?context=privatperson" data-analytics-event-args="{"action":"arbeidsflate-valg","category":"dekorator-header","label":"privatperson"}" class="" data-context="privatperson"><a href="?context=privatperson" class="header-module__headerContextLink"> Privat </a></context-link><context-link href="?context=arbeidsgiver" data-analytics-event-args="{"action":"arbeidsflate-valg","category":"dekorator-header","label":"arbeidsgiver"}" class="" data-context="arbeidsgiver"><a href="?context=arbeidsgiver" class="header-module__headerContextLink header-module__lenkeActive"> Arbeidsgiver </a></context-link><context-link href="?context=samarbeidspartner" data-analytics-event-args="{"action":"arbeidsflate-valg","category":"dekorator-header","label":"samarbeidspartner"}" class="" data-context="samarbeidspartner"><a href="?context=samarbeidspartner" class="header-module__headerContextLink"> Samarbeidspartner </a></context-link> </div> ``` ny html: ```html <context-links class="header-module__arbeidsflate"><a href="?context=privatperson" class="header-module__headerContextLink" data-context="privatperson">Privat</a><a href="?context=arbeidsgiver" class="header-module__headerContextLink header-module__lenkeActive" data-context="arbeidsgiver">Arbeidsgiver</a><a href="?context=samarbeidspartner" class="header-module__headerContextLink" data-context="samarbeidspartner">Samarbeidspartner</a></context-links> ```
navikt · Jul 10, 2024 · da9c1d4 · da9c1d4
1 parent c9f7e47
commit da9c1d4
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 104 deletions.
diff --git a/packages/client/src/views/context-link.ts b/packages/client/src/views/context-link.ts
diff --git a/packages/client/src/views/context-links.ts b/packages/client/src/views/context-links.ts
@@ -0,0 +1,44 @@
+import { amplitudeEvent } from "../analytics/amplitude";
+import { defineCustomElement } from "../custom-elements";
+import { param } from "../params";
+import headerClasses from "../styles/header.module.css";
+
+class ContextLinks extends HTMLElement {
+    handleClick(event: MouseEvent) {
+        if (event.target instanceof HTMLAnchorElement) {
+            const context = event.target.getAttribute("data-context");
+
+            if (context) {
+                amplitudeEvent({
+                    context: param("context"),
+                    action: "arbeidsflate-valg",
+                    category: "dekorator-header",
+                    label: context,
+                });
+            }
+        }
+    }
+
+    handleParamsUpdated = (event: CustomEvent) => {
+        if (event.detail.params.context) {
+            this.querySelectorAll("a").forEach((anchor) => {
+                anchor.classList.toggle(
+                    headerClasses.lenkeActive,
+                    anchor.getAttribute("data-context") ===
+                        event.detail.params.context,
+                );
+            });
+        }
+    };
+
+    connectedCallback() {
+        this.addEventListener("click", this.handleClick);
+        window.addEventListener("paramsupdated", this.handleParamsUpdated);
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("paramsupdated", this.handleParamsUpdated);
+    }
+}
+
+defineCustomElement("context-links", ContextLinks);
diff --git a/packages/server/src/context.ts b/packages/server/src/context.ts
@@ -1,11 +1,9 @@
 import { Context, Language } from "decorator-shared/params";
-import { TextKey } from "decorator-shared/types";
 import { env } from "./env/server";
 import { isNorwegian } from "./i18n";
 
 export type ContextLink = {
     url: string;
-    lenkeTekstId: TextKey;
     context: Context;
 };
 
@@ -17,23 +15,20 @@ export const makeContextLinks = (language: Language): ContextLink[] =>
                       env.ENV === "prod"
                           ? `${env.XP_BASE_URL}`
                           : "?context=privatperson",
-                  lenkeTekstId: "rolle_privatperson",
                   context: "privatperson",
               },
               {
                   url:
                       env.ENV === "prod"
                           ? `${env.XP_BASE_URL}/no/bedrift`
                           : "?context=arbeidsgiver",
-                  lenkeTekstId: "rolle_arbeidsgiver",
                   context: "arbeidsgiver",
               },
               {
                   url:
                       env.ENV === "prod"
                           ? `${env.XP_BASE_URL}/no/samarbeidspartner`
                           : "?context=samarbeidspartner",
-                  lenkeTekstId: "rolle_samarbeidspartner",
                   context: "samarbeidspartner",
               },
           ]

diff --git a/packages/server/src/texts.ts b/packages/server/src/texts.ts
@@ -45,9 +45,9 @@ const nb = {
         "Du får dessverre ikke svar på tilbakemeldingen din. Har du spørsmål eller trenger du hjelp?",
     hensikt_med_tilbakemelding_lenke: "Ring, chat eller skriv til oss",
     send_undersokelse_takk: "Takk for tilbakemeldingen!",
-    rolle_privatperson: "Privat",
-    rolle_arbeidsgiver: "Arbeidsgiver",
-    rolle_samarbeidspartner: "Samarbeidspartner",
+    privatperson: "Privat",
+    arbeidsgiver: "Arbeidsgiver",
+    samarbeidspartner: "Samarbeidspartner",
     meny_bunnlenke_minside_stikkord:
         "Dine saker, utbetalinger, meldinger, meldekort, aktivitetsplan, personopplysninger og flere tjenester",
     meny_bunnlenke_arbeidsgiver_stikkord:
@@ -143,9 +143,9 @@ const en = {
         "Unfortunately you will not get a reply to your feedback. Do you have questions or need help?",
     hensikt_med_tilbakemelding_lenke: "Call, chat or write to us",
     send_undersokelse_takk: "Thank you for your feedback!",
-    rolle_privatperson: "Private",
-    rolle_arbeidsgiver: "Employer",
-    rolle_samarbeidspartner: "Collaborator",
+    privatperson: "Private",
+    arbeidsgiver: "Employer",
+    samarbeidspartner: "Collaborator",
     meny_bunnlenke_minside_stikkord:
         "Your cases, payments, messages, report cards, activity plan, personal information and more services",
     meny_bunnlenke_arbeidsgiver_stikkord:

diff --git a/packages/server/src/views/header/arbeidsgiver-user-menu-dropdown.ts b/packages/server/src/views/header/arbeidsgiver-user-menu-dropdown.ts
@@ -19,7 +19,7 @@ export const ArbeidsgiverUserMenuDropdown = ({
 }: ArbeidsgiverUserMenuProps) => {
     return DropdownMenu({
         button: HeaderButton({
-            content: i18n("rolle_arbeidsgiver"),
+            content: i18n("arbeidsgiver"),
             icon: BriefcaseIcon(),
         }),
         dropdownClass: cls.arbeidsgiverMenuDropdown,

diff --git a/packages/server/src/views/header/complex-header.stories.ts b/packages/server/src/views/header/complex-header.stories.ts
@@ -33,21 +33,9 @@ const meta: Meta = {
             loginUrl: "/logginn",
             contextLinks: isNorwegian(context.globals.locale)
                 ? [
-                      {
-                          url: "",
-                          lenkeTekstId: "rolle_privatperson",
-                          context: "privatperson",
-                      },
-                      {
-                          url: "",
-                          lenkeTekstId: "rolle_arbeidsgiver",
-                          context: "arbeidsgiver",
-                      },
-                      {
-                          url: "",
-                          lenkeTekstId: "rolle_samarbeidspartner",
-                          context: "samarbeidspartner",
-                      },
+                      { url: "", context: "privatperson" },
+                      { url: "", context: "arbeidsgiver" },
+                      { url: "", context: "samarbeidspartner" },
                   ]
                 : [],
             language: context.globals.locale,

diff --git a/packages/server/src/views/header/complex-header.ts b/packages/server/src/views/header/complex-header.ts
@@ -60,33 +60,25 @@ export function ComplexHeader({
                                 })}
                             </lenke-med-sporing>
                             ${contextLinks.length > 0 &&
-                            html`<div class="${cls.arbeidsflate}">
-                                ${contextLinks.map(
-                                    ({ url, lenkeTekstId, context }) =>
-                                        html` <context-link
-                                            href="${url}"
-                                            data-analytics-event-args="${JSON.stringify(
-                                                {
-                                                    action: "arbeidsflate-valg",
-                                                    category:
-                                                        "dekorator-header",
-                                                    label: context,
-                                                },
-                                            )}"
-                                            class="${clsx(
-                                                cls.headerContextLink,
-                                                {
-                                                    [cls.lenkeActive]:
-                                                        context ===
-                                                        currentContext,
-                                                },
-                                            )}"
-                                            data-context="${context.toLowerCase()}"
-                                        >
-                                            ${i18n(lenkeTekstId)}
-                                        </context-link>`,
-                                )}
-                            </div>`}
+                            html`
+                                <context-links class="${cls.arbeidsflate}"
+                                    >${contextLinks.map(
+                                        ({ url, context }) => html`
+                                            <a
+                                                href="${url}"
+                                                class="${clsx(
+                                                    cls.headerContextLink,
+                                                    context ===
+                                                        currentContext &&
+                                                        cls.lenkeActive,
+                                                )}"
+                                                data-context="${context}"
+                                                >${i18n(context)}</a
+                                            >
+                                        `,
+                                    )}</context-links
+                                >
+                            `}
                         </div>
                         <div class="${menuItemsCls.menuItems}">
                             ${UserMenu({ loginUrl })}

diff --git a/packages/shared/types.ts b/packages/shared/types.ts
@@ -64,9 +64,9 @@ export type Texts = ClientTexts & {
     notifications_tasks_title: string;
     no: string;
     search_nav_no: string;
-    rolle_privatperson: string;
-    rolle_arbeidsgiver: string;
-    rolle_samarbeidspartner: string;
+    privatperson: string;
+    arbeidsgiver: string;
+    samarbeidspartner: string;
     meny_bunnlenke_minside_stikkord: string;
     meny_bunnlenke_arbeidsgiver_stikkord: string;
     meny_bunnlenke_samarbeidspartner_stikkord: string;