IS-3017: Tydeliggjøre søket

Author: ingring

src/sider/sokperson/SokPerson.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import {
   Alert,
-  BodyShort,
+  BodyLong,
   Box,
   Button,
   ErrorMessage,
   Heading,
-  HStack,
+  HelpText,
+  Label,
   TextField,
   VStack,
 } from '@navikt/ds-react';
@@ -21,7 +22,28 @@ import * as Amplitude from '@/utils/amplitude';
 const texts = {
   header: 'Søk etter sykmeldt',
   info:
-    'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato.',
+    'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato. ',
+  label: {
+    initials: 'Initialer (valgfritt)',
+    birthdate: 'Fødselsdato (obligatorisk)',
+  },
+  helpText: {
+    info: {
+      title: 'Hvordan søke etter sykmeldt?',
+      text:
+        'Fyll inn fødselsdato for å finne en sykmeldt du har tilgang til, vedkommende må ha et aktivt sykefravær. Ønsker man et mer nøyaktig søk kan man legge til initialer til den sykmeldte, men dette er valgfritt. Det er ikke mulig å bare søke med initialer. ',
+    },
+    initials: {
+      title: 'Hvordan fyller jeg inn initialer?',
+      text:
+        'For å optimalisere søket kan du fylle inn initialene til den du vil søke opp. Feltet krever forbokstaven for fornavn og etternavn uten punktum mellom bokstavene. Det er mulig å legge til forbokstavene for mellomnavn for mer nøyaktig søkeresultat. Rekkefølgen på fornavn, mellomnavn og etternavn i søket er viktig.',
+    },
+    birthdate: {
+      title: 'Hvordan fyller jeg inn fødselsdato?',
+      text:
+        'Fyll inn fødselsdato for å finne en sykmeldt du har tilgang til, vedkommende må ha et aktivt sykefravær. Ønsker man et mer nøyaktig søk kan man legge til initialer til den sykmeldte, men dette er valgfritt. Det er ikke mulig å bare søke med initialer.',
+    },
+  },
   validation: {
     initials: 'Vennligst angi gyldige initialer',
     birthdate: 'Vennligst angi en gyldig fødselsdato',
@@ -55,6 +77,30 @@ function logSokPersonResults(amount: number, requestDTO: SokDTO) {
   });
 }
 
+function InitialerLabel() {
+  return (
+    <div className="flex gap-2">
+      {texts.label.initials}
+      <HelpText title={texts.helpText.initials.title}>
+        <Label>{texts.helpText.initials.title}</Label>
+        <BodyLong>{texts.helpText.initials.text}</BodyLong>
+      </HelpText>
+    </div>
+  );
+}
+
+function FodselsdatoLabel() {
+  return (
+    <div className="flex gap-2">
+      {texts.label.birthdate}
+      <HelpText title={texts.helpText.birthdate.title}>
+        <Label>{texts.helpText.birthdate.title}</Label>
+        <BodyLong>{texts.helpText.birthdate.text}</BodyLong>
+      </HelpText>
+    </div>
+  );
+}
+
 export default function SokPerson() {
   const [initials, setInitials] = useState<string>('');
   const [birthdate, setBirthdate] = useState<string>('');
@@ -78,7 +124,7 @@ export default function SokPerson() {
   };
 
   const isValidInitials = (initials: string): boolean => {
-    return initials === '' || (initials.length <= 3 && initials.length > 1);
+    return initials === '' || (initials.length <= 4 && initials.length > 1);
   };
 
   const handleSubmit = () => {
@@ -109,46 +155,53 @@ export default function SokPerson() {
             handleSubmit();
           }}
         >
-          <Heading level="2" size="medium">
-            {texts.header}
-          </Heading>
+          <div className="flex gap-2 items-center">
+            <Heading level="2" size="medium">
+              {texts.header}
+            </Heading>
+            <HelpText title={texts.helpText.info.title}>
+              <Label>{texts.helpText.info.title}</Label>
+              <BodyLong>{texts.helpText.info.text}</BodyLong>
+            </HelpText>
+          </div>
           <VStack gap="4">
-            <BodyShort>{texts.info}</BodyShort>
-            <HStack gap="8" align="end">
+            <BodyLong>{texts.info}</BodyLong>
+            <div className="grid grid-cols-[auto,auto,auto] gap-x-8 gap-y-2 align-end max-w-max">
               <TextField
-                label="Initialer"
-                description="AB"
-                htmlSize={10}
-                type="text"
-                onChange={(e) => setInitials(e.target.value)}
-                error={isFormError && !isValidInitials(initials)}
-              />
-              <TextField
-                label="Fødselsdato"
+                label={<FodselsdatoLabel />}
                 description="ddmmåå"
                 htmlSize={14}
                 type="text"
                 onChange={(e) => setBirthdate(e.target.value)}
                 error={isInvalidBirthdate}
               />
+              <TextField
+                label={<InitialerLabel />}
+                description="AB"
+                htmlSize={10}
+                type="text"
+                onChange={(e) => setInitials(e.target.value)}
+                error={isFormError && !isValidInitials(initials)}
+              />
               <Button
                 loading={isLoading}
                 icon={<MagnifyingGlassIcon />}
                 type="submit"
+                className="self-end max-w-max"
               >
                 Søk
               </Button>
-            </HStack>
-            {isInvalidInitials && (
-              <ErrorMessage size="small">
-                {texts.validation.initials}
-              </ErrorMessage>
-            )}
-            {isInvalidBirthdate && (
-              <ErrorMessage size="small">
-                {texts.validation.birthdate}
-              </ErrorMessage>
-            )}
+              {isInvalidBirthdate && (
+                <ErrorMessage size="small">
+                  {texts.validation.birthdate}
+                </ErrorMessage>
+              )}
+              {isInvalidInitials && (
+                <ErrorMessage size="small" className="col-start-2">
+                  {texts.validation.initials}
+                </ErrorMessage>
+              )}
+            </div>
             {isError && (
               <Alert variant="error" size="small">
                 {texts.error}