♻️ Fix #3451 scaling for 400% zoom (#3514)

navikt · Jan 22, 2025 · 90f6178 · 90f6178
1 parent 6678742
commit 90f6178
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 84 deletions.
diff --git a/aksel.nav.no/website/components/website-modules/search/parts/Form.tsx b/aksel.nav.no/website/components/website-modules/search/parts/Form.tsx
@@ -25,11 +25,7 @@ export const SearchForm = () => {
   }
 
   return (
-    <form
-      role="search"
-      onSubmit={(e) => e.preventDefault()}
-      className="px-6 pb-4"
-    >
+    <form role="search" onSubmit={(e) => e.preventDefault()} className="w-full">
       <Search
         label={
           <span className="flex items-center gap-2">

diff --git a/aksel.nav.no/website/components/website-modules/search/parts/Hit.tsx b/aksel.nav.no/website/components/website-modules/search/parts/Hit.tsx
@@ -2,12 +2,13 @@ import cl from "clsx";
 import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { forwardRef, useContext } from "react";
+import { Show } from "@navikt/ds-react";
 import { Tag } from "@/cms/frontpage-blocks/latest-articles/Tag";
 import { urlFor } from "@/sanity/interface";
 import { SearchHitT, searchOptions } from "@/types";
 import { StatusTag } from "@/web/StatusTag";
 import { SearchContext, SearchLoggingContext } from "../providers";
-import { highlightMatches, highlightStr } from "../utils";
+import { highlightStr } from "../utils";
 
 export const Hit = forwardRef<
   HTMLLIElement,
@@ -33,23 +34,25 @@ export const Hit = forwardRef<
         "relative flex scroll-my-10 items-center justify-between gap-3 border-b border-border-subtle px-2 last-of-type:border-b-0 has-[+_*_:focus-visible]:border-b-transparent has-[:focus-visible]:border-b-transparent",
       )}
     >
-      <div className="w-full truncate px-2 py-3">
+      <div className="w-full px-2 py-3">
         <span
           className={cl({
-            "flex flex-col": simple,
+            "flex flex-col gap-1 md:flex-row md:justify-between md:gap-4":
+              simple,
             "flex items-center gap-2": !simple,
           })}
         >
           <NextLink
             href={href}
             onClick={() => logSuccess(index, `/${hit.item.slug}`)}
             className={cl(
-              "group scroll-my-32 truncate text-xl font-semibold underline hover:decoration-[3px] focus:outline-none",
+              "group scroll-my-32 break-words text-xl font-semibold underline hover:decoration-[3px] focus:outline-none",
               "after:absolute after:inset-0 after:rounded-lg after:ring-inset focus-visible:after:ring-[3px] focus-visible:after:ring-border-focus",
             )}
           >
             {highlightStr(hit.item.heading, query, tag)}
           </NextLink>
+
           {simple ? (
             <Tag
               type={hit.item._type}
@@ -65,7 +68,9 @@ export const Hit = forwardRef<
           )}
         </span>
 
-        {!simple && <HeadingLinks hit={hit} />}
+        <Show above="md" asChild>
+          <p className="line-clamp-2">{hit.description}</p>
+        </Show>
       </div>
 
       {!simple && (
@@ -87,19 +92,3 @@ export const Hit = forwardRef<
     </li>
   );
 });
-
-function HeadingLinks({
-  hit,
-}: {
-  hit: SearchHitT | Omit<SearchHitT, "score" | "anchor">;
-}) {
-  if (hit.matches && hit.matches?.[0].key !== "heading") {
-    return highlightMatches(hit.matches[0]);
-  }
-
-  return (
-    <span className="max-w-full text-lg font-regular text-text-subtle">
-      {hit.description}
-    </span>
-  );
-}
diff --git a/aksel.nav.no/website/components/website-modules/search/parts/HitCollection.tsx b/aksel.nav.no/website/components/website-modules/search/parts/HitCollection.tsx
@@ -75,7 +75,7 @@ export function Collection({
     <div>
       {heading && tag && (
         <h2
-          className={cl("sticky top-0 z-10 p-2 px-6 md:px-10", {
+          className={cl("top-0 z-10 p-2 px-6 md:sticky md:px-10", {
             "bg-deepblue-50": ["komponent_artikkel", "ds_artikkel"].includes(
               tag,
             ),
@@ -91,7 +91,7 @@ export function Collection({
       )}
       {heading && !tag && (
         <Heading
-          className="sticky top-0 z-10 bg-surface-subtle p-2 px-6 md:px-10"
+          className="top-0 z-10 bg-surface-subtle p-2 px-6 md:sticky md:px-10"
           size="small"
           level="2"
         >

diff --git a/aksel.nav.no/website/components/website-modules/search/parts/SearchToggle.tsx b/aksel.nav.no/website/components/website-modules/search/parts/SearchToggle.tsx
@@ -1,5 +1,6 @@
 import { useContext } from "react";
-import { Modal } from "@navikt/ds-react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button, Heading, Modal } from "@navikt/ds-react";
 import { AkselSearchButton } from "@/web/search/parts/SearchButton";
 import { SearchContext, SearchNavigationContext } from "../providers";
 import { SearchForm } from "./Form";
@@ -22,16 +23,28 @@ export const Search = () => {
             e.stopPropagation();
           }
         }}
-        className="h-[90%] max-h-[52rem]"
+        className="md:h-[90%] md:max-h-[52rem]"
         width="medium"
+        aria-labelledby="aksel-search-heading"
         closeOnBackdropClick
-        header={{
-          heading: "Søk",
-          closeButton: true,
-        }}
       >
+        <Heading
+          level="1"
+          size="medium"
+          id="aksel-search-heading"
+          visuallyHidden
+        >
+          Søk
+        </Heading>
         <Skeleton />
-        <SearchForm />
+        <div className="flex items-center gap-2 px-2 py-1 md:px-4 md:py-4">
+          <SearchForm />
+          <Button
+            variant="tertiary-neutral"
+            onClick={close}
+            icon={<XMarkIcon title="Lukk" />}
+          />
+        </div>
         <Results />
       </Modal>
     </>

diff --git a/aksel.nav.no/website/components/website-modules/search/utils/highlighter.tsx b/aksel.nav.no/website/components/website-modules/search/utils/highlighter.tsx
@@ -1,6 +1,4 @@
 import cl from "clsx";
-import type { FuseResultMatch } from "fuse.js";
-import React from "react";
 import { searchOptions } from "@/types";
 
 function splitStr(str: string, query: string) {
@@ -48,50 +46,3 @@ export function highlightStr(
     </>
   );
 }
-
-export function highlightMatches(hitMatch: FuseResultMatch) {
-  const text = hitMatch.value;
-
-  if (!text) {
-    return null;
-  }
-
-  const result: { text: string; highlight: boolean }[] = [];
-  const matches = [...hitMatch.indices];
-
-  let index = 0;
-  matches.forEach((match, i) => {
-    const str = text.substring(match[0], match[1] - 1);
-    let preText = text.substring(index, match[0]);
-
-    if (i === 0) {
-      const preLength = preText.length;
-      preText = preText.substring(preText.length - 23);
-      if (preText.length < preLength) {
-        preText = `...${preText}`;
-      }
-    }
-
-    result.push({ text: preText, highlight: false });
-    result.push({ text: str, highlight: true });
-    index = match[1] - 1;
-    if (i === matches.length - 1) {
-      result.push({ text: text.substring(index), highlight: false });
-    }
-  });
-
-  return (
-    <span>
-      {result.map((part, i) => (
-        <span
-          key={i}
-          className={cl({
-            "font-semibold text-text-default": part.highlight,
-          })}
-        >
-          {part.text}
-        </span>
-      ))}
-    </span>
-  );
-}