Desginendringer ifm. søket i dekoratøren

packages/client/src/styles/complex-header-menu.module.css

@@ -4,8 +4,8 @@
 
 .searchMenu {
     display: grid;
-    gap: var(--a-spacing-4);
     padding-inline: var(--edge-spacing);
+    grid-gap: var(--a-spacing-4);
 }
 
 @media (min-width: 768px) {

packages/client/src/styles/dropdown-menu.module.css

@@ -8,14 +8,14 @@
     max-height: 0;
     opacity: 0;
     overflow: hidden;
+    padding-block: var(--a-spacing-6) var(--a-spacing-8);
     transition-duration: 0.4s;
     transition-property: max-height, opacity;
     transition-timing-function: ease-in;
-    width: 100%;
     background-color: var(--a-surface-default);
     border-radius: 0 0 var(--a-border-radius-medium)
         var(--a-border-radius-medium);
-    overflow: hidden;
+    word-break: break-word;
 }
 
 :where(.dropdownMenuOpen) > .dropdownMenuContainer {

packages/client/src/styles/main-menu.module.css

@@ -2,6 +2,10 @@
     display: grid;
 }
 
+.mainMenu:global(.hidden) {
+    display: none;
+}
+
 @media (min-width: 1024px) {
     .mainMenu {
         grid-template-columns: 2fr minmax(340px, 1fr);

packages/client/src/styles/menu-items.module.css

@@ -13,7 +13,6 @@
 
 .searchDropdown {
     max-width: 700px;
-    padding-block: var(--a-spacing-2) var(--a-spacing-4);
     padding-inline: var(--edge-spacing);
 }
 

packages/client/src/styles/search-hits.module.css

@@ -14,14 +14,26 @@
     color: inherit;
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: var(--a-spacing-4);
-    padding: var(--a-spacing-4);
-    padding-left: 0;
+    gap: var(--a-spacing-2);
+    padding: var(--a-spacing-3) 0;
+}
+
+.searchMoreHits {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 1rem;
+}
+
+.searchHitRightArrow {
+    margin-left: 0.5rem;
+    font-size: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
 }
 
 @media (min-width: 768px) {
     .searchHit {
-        padding-left: var(--a-spacing-4);
         border-bottom: 1px solid var(--a-border-default);
     }
 }

packages/client/src/views/search-menu.ts

@@ -16,10 +16,12 @@ class SearchMenu extends HTMLElement {
     }
 
     clearSearch = () => {
+        const mainMenu = document.getElementById("decorator-main-menu");
         this.hits.remove();
         if (this.input) {
             this.input.value = "";
         }
+        mainMenu && mainMenu.classList.remove("hidden");
     };
 
     focus = () => this.input?.focus();
@@ -56,7 +58,7 @@ class SearchMenu extends HTMLElement {
                 eventName: "søk",
                 destination: url,
                 category: "dekorator-header",
-                label: query,
+                label: "[redacted]",
                 action: "søk-dynamisk",
             });
 
@@ -72,15 +74,17 @@ class SearchMenu extends HTMLElement {
         const fetchSearchDebounced = debounce(fetchSearch, 500);
 
         this.input?.addEventListener("input", (e) => {
+            const mainMenu = document.getElementById("decorator-main-menu");
             const { value } = e.target as HTMLInputElement;
             if (value.length > 2) {
                 this.append(this.hits);
                 this.hits.innerHTML = html`<decorator-loader
                     title="${window.__DECORATOR_DATA__.texts.loading_preview}"
                 />`.render();
-
+                mainMenu && mainMenu.classList.add("hidden");
                 fetchSearchDebounced(value);
             } else {
+                mainMenu && mainMenu.classList.remove("hidden");
                 this.hits.remove();
             }
         });
@@ -90,7 +94,6 @@ class SearchMenu extends HTMLElement {
         if (this.getAttribute("data-auto-focus") !== null) {
             this.parentDropdown?.removeEventListener("menuopened", this.focus);
         }
-
         this.parentDropdown?.removeEventListener(
             "menuclosed",
             this.clearSearch,

packages/server/src/handlers/search-handler.ts

@@ -45,8 +45,8 @@ export const searchHandler = async ({
 }): Promise<string> => {
     const result = await fetchSearch({
         query,
-        context,
         language,
+        context,
     });
 
     if (!result.ok) {
@@ -61,5 +61,7 @@ export const searchHandler = async ({
         },
         query,
         texts: texts[language],
+        language,
+        context,
     }).render();
 };

packages/server/src/texts.ts

@@ -46,6 +46,9 @@ const nb = {
     rolle_privatperson: "Privat",
     rolle_arbeidsgiver: "Arbeidsgiver",
     rolle_samarbeidspartner: "Samarbeidspartner",
+    sok_rolle_privatperson: "privatperson",
+    sok_rolle_arbeidsgiver: "arbeidsgiver",
+    sok_rolle_samarbeidspartner: "samarbeidspartner",
     meny_bunnlenke_minside_stikkord:
         "Dine saker, utbetalinger, meldinger, meldekort, aktivitetsplan, personopplysninger og flere tjenester",
     meny_bunnlenke_arbeidsgiver_stikkord:
@@ -58,7 +61,10 @@ const nb = {
     showing: "Viser",
     of: "av",
     results: "resultater",
+    hits: "treff",
     see_all_hits: "Se alle treff",
+    more_hits: "Flere treff",
+    change_search_filter: "Endre søkefilter for å se andre treff",
     no_hits_for: "Ingen treff for",
     loading_preview: "Laster forhåndsvisning",
     to_front_page: "Til forsiden",
@@ -131,6 +137,9 @@ const en = {
     rolle_privatperson: "Private",
     rolle_arbeidsgiver: "Employer",
     rolle_samarbeidspartner: "Collaborator",
+    sok_rolle_privatperson: "private",
+    sok_rolle_arbeidsgiver: "employer",
+    sok_rolle_samarbeidspartner: "collaborator",
     meny_bunnlenke_minside_stikkord:
         "Your cases, payments, messages, report cards, activity plan, personal information and more services",
     meny_bunnlenke_arbeidsgiver_stikkord:
@@ -143,7 +152,10 @@ const en = {
     showing: "Showing",
     of: "of",
     results: "results",
+    hits: "hits",
     see_all_hits: "See all hits",
+    more_hits: "More hits",
+    change_search_filter: "Change search filter to see other hits",
     no_hits_for: "No hits for",
     loading_preview: "Loading preview",
     to_front_page: "To the front page",

packages/server/src/views/header/main-menu.ts

@@ -17,7 +17,7 @@ export function MainMenu({
     links,
     contextLinks,
 }: MainMenuProps) {
-    return html`<div class="${cls.mainMenu}">
+    return html`<div id="decorator-main-menu" class="${cls.mainMenu}">
         <div class="${cls.content}">
             <div class="${cls.header}">
                 <h2 class="${cls.title}">${title}</h2>

packages/server/src/views/search-hits.ts

@@ -1,26 +1,37 @@
 import html, { unsafeHtml } from "decorator-shared/html";
 import { Texts } from "decorator-shared/types";
 import cls from "decorator-client/src/styles/search-hits.module.css";
-import { ForwardChevron } from "decorator-shared/views/icons";
+import { ForwardChevron, ArrowRight } from "decorator-shared/views/icons";
 import { SearchResult } from "../handlers/search-handler";
+import { Context, Language } from "decorator-shared/params";
 
 export type SearchHitsProps = {
     results: SearchResult;
     query: string;
     texts: Texts;
+    language: Language;
+    context: Context;
 };
 
 export const SearchHits = ({
     results: { hits, total },
     query,
     texts,
+    language,
+    context,
 }: SearchHitsProps) => html`
     <div class="${cls.searchHits}">
-        ${total === 0
-            ? html`<h2 class="${cls.title}">
-                  ${texts.no_hits_for} (${query})
-              </h2>`
-            : html`<ul class="${cls.searchHitList}">
+        <div>
+            <h2 role="status" class="${cls.title}">
+                ${total.toString()} ${texts.hits} for &laquo;${query}&raquo
+                ${language !== "en" && ` for ${texts[`sok_rolle_${context}`]}`}
+            </h2>
+            <a href="https://www.nav.no/sok?ord=${query}">
+                ${texts.change_search_filter}
+            </a>
+        </div>
+        ${total > 0
+            ? html` <ul class="${cls.searchHitList}">
                       ${hits.map(
                           (hit, index) => html`
                               <li>
@@ -52,14 +63,15 @@ export const SearchHits = ({
                           `,
                       )}
                   </ul>
-                  <div>
-                      <div role="status">
-                          ${texts.showing} ${Math.min(total, 5).toString()}
-                          ${texts.of} ${total.toString()} ${texts.results}
-                      </div>
-                      <a href="https://www.nav.no/sok?ord=${query}">
-                          ${texts.see_all_hits} ("${query}")
-                      </a>
-                  </div>`}
+                  <a
+                      class="${cls.searchMoreHits}"
+                      href="https://www.nav.no/sok?ord=${query}"
+                  >
+                      ${texts.more_hits}
+                      ${ArrowRight({
+                          className: cls.searchHitRightArrow,
+                      })}
+                  </a>`
+            : null}
     </div>
 `;

packages/shared/types.ts

@@ -64,6 +64,9 @@ export type Texts = ClientTexts & {
     rolle_privatperson: string;
     rolle_arbeidsgiver: string;
     rolle_samarbeidspartner: string;
+    sok_rolle_privatperson: string;
+    sok_rolle_arbeidsgiver: string;
+    sok_rolle_samarbeidspartner: string;
     meny_bunnlenke_minside_stikkord: string;
     meny_bunnlenke_arbeidsgiver_stikkord: string;
     meny_bunnlenke_samarbeidspartner_stikkord: string;
@@ -74,8 +77,11 @@ export type Texts = ClientTexts & {
     of: string;
     results: string;
     see_all_hits: string;
+    hits: string;
     no_hits_for: string;
+    more_hits: string;
     to_front_page: string;
+    change_search_filter: string;
     footer_del_skjerm: string;
     delskjerm_modal_beskrivelse: string;
     delskjerm_modal_start: string;

packages/shared/views/icons/arrow-right.ts

@@ -0,0 +1,25 @@
+import html from "../../html";
+
+export function ArrowRight({ className }: { className?: string }) {
+    return html`
+        <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            role="img"
+            aria-hidden="true"
+            ${className && html`class="${className}"`}
+        >
+            <title id="arrow-to-more-search-hits">pil-opp-ikon</title>
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M14.087 6.874a.752.752 0 0 0-.117 1.156l3.22 3.22H5a.75.75 0 0 0 0 1.5h12.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l4.5-4.5a.75.75 0 0 0 0-1.06l-4.5-4.5a.75.75 0 0 0-.943-.096"
+                fill="currentColor"
+            ></path>
+        </svg>
+    `;
+}

packages/shared/views/icons/index.ts

@@ -6,6 +6,7 @@ export * from "./close";
 export * from "./login";
 export * from "./search";
 export * from "./arrow-up";
+export * from "./arrow-right";
 export * from "./info";
 export * from "./person-circle";
 export * from "./person-circle-notification";