Feature/person lookup

package.json

@@ -22,8 +22,11 @@
     "test:preview": "jest-preview",
     "test:clear-cache": "jest --clearCache",
     "cy:open": "cypress open --env environment=tt02",
+    "cy:open:docker": "cypress open --env environment=docker",
     "cy:run": "cypress run --env environment=tt02",
+    "cy:run:docker": "cypress run --env environment=docker",
     "cy:parallel": "cypress-parallel -s cy:run -t 3 -d test/e2e/integration",
+    "cy:parallel:docker": "cypress-parallel -s cy:run:docker -t 3 -d test/e2e/integration",
     "tsc": "yarn gen && tsc && tsc --project test/tsconfig.json",
     "tsc:watch": "yarn gen && tsc --watch",
     "tsc:watch:cypress": "yarn gen && tsc --watch --project test/tsconfig.json",
@@ -136,6 +139,7 @@
     "@navikt/aksel-icons": "^7.0.0",
     "@tanstack/react-query": "^5.25.0",
     "ajv": "8.17.1",
+    "ajv-errors": "^3.0.0",
     "ajv-formats": "3.0.1",
     "ajv-formats-draft2019": "^1.6.1",
     "axios": "1.7.8",

src/app-components/Label/Fieldset.tsx

@@ -12,6 +12,7 @@ import type { GridSize } from 'src/app-components/Label/types';
 export type FieldsetProps = {
   id?: string;
   legend: string | ReactElement | undefined;
+  legendSize?: Extract<DesignsystemetLabelProps['size'], 'sm' | 'md' | 'lg' | 'xl'>;
   className?: string;
   grid?: GridSize;
   optionalIndicator?: ReactElement;
@@ -28,6 +29,7 @@ export function Fieldset({
   children,
   className,
   legend,
+  legendSize = 'md',
   grid,
   style,
   help,
@@ -72,7 +74,7 @@ export function Fieldset({
             <span className={cn(labelClasses.labelAndHelpWrapper)}>
               <DesignsystemetLabel
                 weight='medium'
-                size='md'
+                size={legendSize}
                 style={style}
                 asChild
               >

src/features/expressions/shared-tests/functions/displayValue/person-lookup.json

@@ -0,0 +1,35 @@
+{
+  "name": "Display value of Person Lookup component",
+  "expression": [
+    "displayValue",
+    "personlookup"
+  ],
+  "context": {
+    "component": "personlookup",
+    "currentLayout": "Page"
+  },
+  "expects": "44829800753, Løve",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "personlookup",
+            "type": "PersonLookup",
+            "dataModelBindings": {
+              "person_lookup_ssn": "PersonLookup.Ssn",
+              "person_lookup_name": "PersonLookup.Name"
+            }
+          }
+        ]
+      }
+    }
+  },
+  "dataModel": {
+    "PersonLookup": {
+      "Ssn": "44829800753",
+      "Name": "Løve"
+    }
+  }
+}

src/language/texts/en.ts

@@ -118,6 +118,8 @@ export function en() {
       zipCode: 'Zip Code',
       no_options_found: 'No matches found',
       clear_selection: 'Clear selection',
+      person_lookup_ssn: 'national ID number/D-number',
+      person_lookup_name: 'name',
     },
     navigation: {
       main: 'App navigation',
@@ -315,6 +317,21 @@ export function en() {
         vat: 'VAT',
       },
     },
+    person_lookup: {
+      ssn_label: 'National ID number/D-number',
+      surname_label: 'Surname',
+      name_label: 'Name',
+      from_registry_description: 'From the National Population Register',
+      validation_error_name_too_short: "The name can't be shorter than 2 characters",
+      validation_error_ssn: 'The national ID number/D-number is invalid.',
+      validation_error_not_found:
+        'No person is registered with this combination of national ID number/D-number and name. Please check the fields and try again. \n\nNote: After 5 failed attempts, the search functionality will be temporarily locked.',
+      validation_error_too_many_requests: 'Too many requests. Please try again later.',
+      validation_error_forbidden:
+        'You do not have permission to perform this action. A security level of minimum 2 is required.',
+      validation_invalid_response_from_server: 'An error occurred. Please try again later.',
+      unknown_error: 'An unknown error occurred. Please try again later.',
+    },
     helptext: {
       button_title: 'Help',
       button_title_prefix: 'Helptext for',

src/language/texts/nb.ts

@@ -118,6 +118,8 @@ export function nb(): FixedLanguageList {
       zipCode: 'Postnr',
       no_options_found: 'Fant ingen treff',
       clear_selection: 'Fjern alle valgte',
+      person_lookup_ssn: 'fødselsnummer',
+      person_lookup_name: 'navn',
     },
     navigation: {
       main: 'Appnavigasjon',
@@ -316,6 +318,21 @@ export function nb(): FixedLanguageList {
         vat: 'MVA',
       },
     },
+    person_lookup: {
+      ssn_label: 'Fødselsnummer',
+      surname_label: 'Etternavn',
+      name_label: 'Navn',
+      from_registry_description: 'Fra folkeregisteret',
+      validation_error_name_too_short: 'Etternavn må være minst 2 tegn langt',
+      validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
+      validation_error_not_found:
+        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og navn. Vennligst kontroller feltene og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemuligheten midlertidig sperret.',
+      validation_error_too_many_requests: 'Du har nådd grensen for antall søk. Vennligst prøv igjen senere.',
+      validation_error_forbidden:
+        'Du har ikke tilgang til å søke på denne personen. Sikkerhetsnivå 2 eller høyere kreves.',
+      validation_invalid_response_from_server: 'Det oppstod en feil. Vennligst prøv igjen senere.',
+      unknown_error: 'Ukjent feil. Vennligst prøv igjen senere.',
+    },
     helptext: {
       button_title: 'Hjelp',
       button_title_prefix: 'Hjelpetekst for',

src/language/texts/nn.ts

@@ -118,6 +118,8 @@ export function nn(): FixedLanguageList {
       zipCode: 'Postnr',
       no_options_found: 'Fann ingen treff',
       clear_selection: 'Fjern alle valde',
+      person_lookup_ssn: 'fødselsnummer',
+      person_lookup_name: 'namn',
     },
     navigation: {
       main: 'Appnavigasjon',
@@ -316,6 +318,21 @@ export function nn(): FixedLanguageList {
         vat: 'MVA',
       },
     },
+    person_lookup: {
+      ssn_label: 'Fødselsnummer',
+      surname_label: 'Etternamn',
+      name_label: 'Namn',
+      from_registry_description: 'Frå folkeregisteret',
+      validation_error_name_too_short: 'Etternamn må vere minst 2 teikn lange.',
+      validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
+      validation_error_not_found:
+        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og namn. Ver venleg og kontroller felta og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemoglegheita mellombels sperra.',
+      validation_error_too_many_requests: 'Du har gjort for mange søk. Ver venleg, prøv igjen seinare.',
+      validation_error_forbidden:
+        'Du har ikkje tilgang til å gjere dette søket. Sikkerheitsnivå 2 eller høgare er påkravd.',
+      validation_invalid_response_from_server: 'Det oppstod ein feil. Ver venleg, prøv igjen seinare.',
+      unknown_error: 'Det oppstod ein feil. Ver venleg, prøv igjen seinare.',
+    },
     helptext: {
       button_title: 'Hjelp',
       button_title_prefix: 'Hjelpetekst for',

src/layout/PersonLookup/PersonLookupComponent.module.css

@@ -0,0 +1,47 @@
+/* breakpoints-xs */
+@media only screen and (min-width: 0) {
+  .componentWrapper {
+    grid-template-areas: 'ssnLabel' 'ssn' 'nameLabel' 'name' 'submit' 'apiError';
+    gap: var(--fds-spacing-2);
+  }
+}
+
+/* breakpoints-md */
+@media only screen and (min-width: 840px) {
+  .componentWrapper {
+    grid-template-columns: repeat(2, minmax(250px, 250px)) auto;
+    grid-template-areas: 'ssnLabel nameLabel .' 'ssn name submit' 'apiError apiError .';
+    align-items: end;
+    column-gap: var(--fds-spacing-2);
+  }
+}
+
+.componentWrapper {
+  display: grid;
+
+  .ssnLabel {
+    grid-area: ssnLabel;
+    align-self: start;
+  }
+
+  .ssn {
+    grid-area: ssn;
+    align-self: start;
+  }
+
+  .nameLabel {
+    grid-area: nameLabel;
+    align-self: start;
+  }
+
+  .name {
+    grid-area: name;
+    align-self: start;
+  }
+
+  .submit {
+    grid-area: submit;
+    align-self: start;
+    white-space: nowrap;
+  }
+}