Legger inn komponent for dato-input

packages/aap-felles-css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/aap-felles-css/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "name": "@navikt/aap-felles-css",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/aap-felles-css/src/form.css

@@ -12,3 +12,6 @@
   margin-left: 1rem;
 }
 
+.aap_date_input > input {
+  max-width: 14ch;
+}

packages/aap-felles-prettier/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/aap-felles-prettier/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aap-felles-prettier",
   "author": "NAV",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "main": "index.json",
   "license": "MIT",
   "dependencies": {

packages/aap-felles-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/aap-felles-react/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "name": "@navikt/aap-felles-react",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",
@@ -22,7 +22,8 @@
   "scripts": {
     "clean": "rm -rf ./cjs ./esm",
     "build": "yarn run clean && tsc -p tsconfig.json && tsc -p tsconfig.esm.json",
-    "test": "vitest --run"
+    "test": "vitest --run",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@navikt/aksel-icons": "^7.2.1",

packages/aap-felles-react/src/Form/FormField.tsx

@@ -11,6 +11,7 @@ import { CheckboxWrapper } from './checkboxwrapper/CheckboxWrapper';
 import { Checkbox, Radio } from '@navikt/ds-react';
 import { RadioGroupWrapper } from './radiogroupwrapper/RadioGroupWrapper';
 import { ComboboxWrapper } from './comboboxwrapper/ComboboxWrapper';
+import { DateInputWrapper } from './dateinputwrapper/DateInputWrapper';
 
 export interface ValuePair<Enum = string> {
   value: Enum;
@@ -87,6 +88,17 @@ export const FormField = <FormFieldIds extends FieldValues>(props: Props<FormFie
           readOnly={formField.readOnly}
         />
       )}
+      {formField.type === 'date_input' && (
+        <DateInputWrapper
+          name={formField.name}
+          label={formField.label}
+          control={form.control}
+          rules={formField.rules}
+          description={formField.description}
+          readOnly={formField.readOnly}
+          className={className}
+        />
+      )}
       {formField.type === 'checkbox' && (
         <CheckboxWrapper
           name={formField.name}

packages/aap-felles-react/src/Form/FormHook.tsx

@@ -11,6 +11,7 @@ export type FormFieldsConfig<FormFieldId extends FieldPath<FormFieldIds>, FormFi
 export type FormFieldConfig<FormFieldIds extends FieldValues> =
   | FormFieldText<FormFieldIds>
   | FormFieldDate<FormFieldIds>
+  | FormFieldDateInput<FormFieldIds>
   | FormFieldWithOptions<FormFieldIds>
   | FormFieldSelect<FormFieldIds>
   | FormFieldCheckbox<FormFieldIds>
@@ -46,6 +47,11 @@ interface FormFieldDate<FormFieldIds extends FieldValues> extends BaseFormField<
   hideLabel?: boolean;
 }
 
+interface FormFieldDateInput<FormFieldIds extends FieldValues> extends BaseFormField<FormFieldIds> {
+  type: 'date_input';
+  defaultValue?: string; 
+}
+
 interface FormFieldWithOptions<FormFieldIds extends FieldValues> extends BaseFormField<FormFieldIds> {
   type: 'radio' | 'combobox';
   options: string[] | ValuePair[];

packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.test.tsx

@@ -0,0 +1,73 @@
+import { describe, test, expect, vi } from 'vitest';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useConfigForm } from '../FormHook';
+import React from 'react';
+import { FormField } from '../FormField';
+
+describe('DateInputWrapper', () => {
+  const user = userEvent.setup();
+
+  test('at label er synlig', () => {
+    render(<TestForm />);
+    expect(screen.getByRole('textbox', { name: 'Dato' })).toBeVisible();
+  });
+
+  test('at description vises hvis den har verdi', () => {
+    render(<TestForm />);
+    expect(screen.getByText('Datoformat: dd.mm.åååå')).toBeVisible();
+  });
+
+  test('at feltet ikke har noen verdi dersom defaultValue ikke er satt', () => {
+    render(<TestForm />);
+    expect(screen.getByRole('textbox', { name: 'Dato' })).toHaveValue('');
+  });
+
+  test('at feltet har verdi dersom defaultValue er satt', () => {
+    render(<TestForm defaultValue="02.07.2024" />);
+    expect(screen.getByRole('textbox', { name: 'Dato' })).toHaveValue('02.07.2024');
+  });
+
+  test('viser feilmelding når regler ikke er oppfylt', async () => {
+    render(<TestForm />);
+    const textArea = screen.getByRole('textbox', { name: 'Dato' });
+    await user.type(textArea, '19.09.20224');
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    expect(screen.getByText('Ugyldig datoformat')).toBeVisible();
+  });
+
+  test('viser ingen feilmelding når regler er oppfylt', async () => {
+    render(<TestForm />);
+    const textArea = screen.getByRole('textbox', { name: 'Dato' });
+    await user.type(textArea, '19.09.2022');
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    expect(screen.queryByText('Ugyldig datoformat')).not.toBeInTheDocument();
+  });
+});
+
+type FormFields = {
+  dato: string;
+};
+
+type Props = {
+  defaultValue?: string;
+};
+
+const TestForm = (props: Props) => {
+  const { formFields, form } = useConfigForm<FormFields>({
+    dato: {
+      type: 'date_input',
+      label: 'Dato',
+      description: 'Datoformat: dd.mm.åååå',
+      defaultValue: props.defaultValue,
+      rules: { maxLength: { value: 10, message: 'Ugyldig datoformat' } },
+    },
+  });
+  return (
+    <form onSubmit={form.handleSubmit(() => vi.fn())}>
+      <FormField form={form} formField={formFields.dato} />
+      <button>Send</button>
+    </form>
+  );
+};

packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.tsx

@@ -0,0 +1,48 @@
+import { TextField } from '@navikt/ds-react';
+import React from 'react';
+import { ReactNode } from 'react';
+import { Control, Controller, FieldPath, FieldValues, RegisterOptions } from 'react-hook-form';
+
+export type DateInputWrapperProps<FormFieldValues extends FieldValues> = {
+  name: FieldPath<FormFieldValues>;
+  label?: string;
+  control: Control<FormFieldValues>;
+  description?: ReactNode;
+  rules?: RegisterOptions<FormFieldValues>;
+  readOnly?: boolean;
+  className?: string;
+};
+
+export const DateInputWrapper = <FormFieldValues extends FieldValues>({
+  name,
+  label,
+  control,
+  description,
+  rules,
+  readOnly,
+  className,
+}: DateInputWrapperProps<FormFieldValues>) => {
+  const classNames = `aap_date_input ${className}`;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field: { name, value, onChange }, fieldState: { error } }) => (
+        <TextField
+          id={name}
+          name={name}
+          size={'small'}
+          label={label}
+          type={'text'}
+          error={error?.message}
+          value={value || ''}
+          onChange={onChange}
+          description={description}
+          readOnly={readOnly}
+          className={classNames}
+        />
+      )}
+    />
+  );
+};

packages/aap-felles-react/src/Form/index.tsx

@@ -7,3 +7,4 @@ export * from './radiogroupwrapper/RadioGroupWrapper';
 export * from './selectwrapper/SelectWrapper';
 export * from './textareawrapper/TextAreaWrapper';
 export * from './textfieldwrapper/TextFieldWrapper';
+export * from './dateinputwrapper/DateInputWrapper';

packages/aap-felles-utils-client/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/aap-felles-utils-client/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "name": "@navikt/aap-felles-utils-client",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/aap-felles-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/aap-felles-utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "name": "@navikt/aap-felles-utils",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/eslint-config-aap/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.5
+
+### Patch Changes
+
+- Legger til DateInputWrapper for bruk i skjemaer
+
 ## 2.0.4
 
 ### Patch Changes

packages/eslint-config-aap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/eslint-config-aap",
   "author": "NAV",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\"",