From 9d54c6b27e27d97c9343e12f3473158b8dfafb4a Mon Sep 17 00:00:00 2001
From: frodehansen2 <frode.hansen@bekk.no>
Date: Thu, 12 Dec 2024 11:09:15 +0100
Subject: [PATCH] Fjerne required prop

---
 .../formik-checkbox-group/FormikCheckboxGroup.tsx         | 2 ++
 .../src/components/formik-checkbox/FormikCheckbox.tsx     | 2 ++
 .../FormikConfirmationCheckbox.tsx                        | 2 ++
 .../components/formik-country-select/CountrySelect.tsx    | 8 +++++++-
 .../formik-country-select/FormikCountrySelect.tsx         | 2 ++
 .../src/components/formik-datepicker/FormikDatepicker.tsx | 2 ++
 .../components/formik-input-group/FormikInputGroup.tsx    | 2 ++
 .../components/formik-number-input/FormikNumberInput.tsx  | 2 ++
 .../components/formik-radio-group/FormikRadioGroup.tsx    | 2 ++
 .../src/components/formik-select/FormikSelect.tsx         | 2 ++
 .../src/components/formik-text-field/FormikTextField.tsx  | 2 ++
 .../src/components/formik-textarea/FormikTextarea.tsx     | 2 ++
 .../src/components/formik-time-input/FormikTimeInput.tsx  | 2 ++
 .../formik-yes-or-no-question/FormikYesOrNoQuestion.tsx   | 2 ++
 .../sif-common-formik-ds/src/utils/inputPropsToRemove.ts  | 8 ++++++++
 .../stories/components/FormikRadioGroup.stories.tsx       | 1 +
 .../stories/components/FormikTextField.stories.tsx        | 1 +
 17 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts

diff --git a/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx
index eaf5165df2..54670985c7 100644
--- a/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type FormikCheckboxGroupCheckboxProp = Omit<CheckboxProps, 'children' | 'name' | 'checked'> & {
     label: React.ReactNode;
@@ -48,6 +49,7 @@ function FormikCheckboxGroup<FieldName, ErrorType>({
                 return (
                     <CheckboxGroup
                         {...restProps}
+                        {...inputPropsToRemove}
                         value={getFieldValueArray(field.value)}
                         legend={legend}
                         className="focusableFieldset"
diff --git a/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx b/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx
index 401e7eb1a8..3d7d0b1366 100644
--- a/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { FormError, TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<CheckboxProps, 'name' | 'error' | 'children'> {
     name: FieldName;
@@ -36,6 +37,7 @@ function FormikCheckbox<FieldName, ErrorType>({
                     <Checkbox
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={hasError !== undefined}
                         checked={field.value === true}
                         autoComplete="off"
diff --git a/packages/sif-common-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx b/packages/sif-common-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx
index daf98060ab..e810b48fe8 100644
--- a/packages/sif-common-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<ConfirmationPanelProps, 'name' | 'onChange' | 'checked'> {
     name: FieldName;
@@ -28,6 +29,7 @@ function FormikConfirmationCheckbox<FieldName, ErrorType>({
                     <ConfirmationPanel
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         checked={field.value === true}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(evt) => {
diff --git a/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx b/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx
index 2bcd300574..3b9adfe38f 100644
--- a/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { getCountries } from '../../utils/countryUtils';
 import { TestProps } from '../../types';
 import { Select, SelectProps } from '@navikt/ds-react';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface Props extends TestProps, Omit<SelectProps, 'onChange' | 'children'> {
     label: React.ReactNode;
@@ -56,7 +57,12 @@ class CountrySelect extends React.Component<Props> {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { onChange, name, showOnlyEuAndEftaCountries, locale, ...restProps } = this.props;
         return (
-            <Select name={name} {...restProps} onChange={(e) => onChange(e.target.value)} autoComplete="off">
+            <Select
+                name={name}
+                {...restProps}
+                {...inputPropsToRemove}
+                onChange={(e) => onChange(e.target.value)}
+                autoComplete="off">
                 <option value="" />
                 {this.getCountryOptions(locale || 'nb')}
             </Select>
diff --git a/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx b/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx
index e3883f2b38..a649fb8689 100644
--- a/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx
@@ -5,6 +5,7 @@ import { TestProps, TypedFormInputValidationProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import CountrySelect from './CountrySelect';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<SelectProps, 'name' | 'children'> {
     name: FieldName;
@@ -31,6 +32,7 @@ function FormikCountrySelect<FieldName, ErrorType>({
                     <CountrySelect
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         data-testid={testKey}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(value) => {
diff --git a/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx b/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx
index 8dd880e360..e975f38da1 100644
--- a/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx
@@ -7,6 +7,7 @@ import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import DateInputAndPicker from './date-input-and-picker/DateInputAndPicker';
 import { ISODateString } from './dateFormatUtils';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type DatepickerLimitations = {
     minDate?: Date;
@@ -72,6 +73,7 @@ function FormikDatepicker<FieldName, ErrorType>({
                         value={field.value}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         {...restProps}
+                        {...inputPropsToRemove}
                     />
                 );
             }}
diff --git a/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx
index f53bfb8be7..d5787226a6 100644
--- a/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<FieldsetProps, 'name'> {
     name: FieldName;
@@ -29,6 +30,7 @@ function FormikInputGroup<ErrorType, FieldName>({
                 return (
                     <Fieldset
                         {...restProps}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         id={id}
                         tabIndex={id ? -1 : undefined}
diff --git a/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx b/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx
index 1b82a74c32..72bc01e7d0 100644
--- a/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx
@@ -8,6 +8,7 @@ import FormikTextField from '../formik-text-field/FormikTextField';
 import { TextFieldWidths } from '../formik-text-field/FormikTextFieldUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { useIntl } from 'react-intl';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextFieldProps, 'name' | 'children' | 'width'> {
     name: FieldName;
@@ -41,6 +42,7 @@ function FormikNumberInput<FieldName, ErrorType>({
                     <FormikTextField
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         type="text"
                         width={width}
                         autoComplete={autoComplete || 'off'}
diff --git a/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx
index 1b6710e8d9..b7a3a30ff7 100644
--- a/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext, TypedFormikFormContextType } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type FormikRadioProp = Omit<RadioProps, 'children' | 'name'> & {
     label: React.ReactNode;
@@ -69,6 +70,7 @@ function FormikRadioGroup<FieldName, ErrorType>({
                 return (
                     <RadioGroup
                         {...restProps}
+                        {...inputPropsToRemove}
                         description={
                             restProps.description ? <BodyShort as="div">{restProps.description}</BodyShort> : undefined
                         }
diff --git a/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx b/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx
index 64c5010e2e..6759b9ba00 100644
--- a/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx
@@ -4,6 +4,7 @@ import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { Select, SelectProps } from '@navikt/ds-react';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<SelectProps, 'name'> {
     name: FieldName;
@@ -31,6 +32,7 @@ function FormikSelect<FieldName, ErrorType>({
                     <Select
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         autoComplete="off"
                         value={field.value === undefined ? '' : field.value}>
diff --git a/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx b/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx
index 522f27e771..bc0ee3d411 100644
--- a/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx
@@ -2,6 +2,7 @@ import { TextField, TextFieldProps } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { getTextFieldWidthClassName, TextFieldWidths } from './FormikTextFieldUtils';
@@ -46,6 +47,7 @@ function FormikTextField<FieldName, ErrorType>({
                     <TextField
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         label={<div>{label}</div>}
                         autoComplete={autoComplete}
                         className={getTextFieldWidthClassName(width, className)}
diff --git a/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx b/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx
index deb7c8ebcf..40680276e7 100644
--- a/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextareaProps, 'name' | 'defaultValue'> {
     name: FieldName;
@@ -30,6 +31,7 @@ function FormikTextarea<FieldName, ErrorType>({
                     <Textarea
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(evt) => {
                             form.setFieldValue(field.name, evt.target.value);
diff --git a/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx b/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx
index 22e61a77d5..0b638bfd6a 100644
--- a/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx
@@ -9,6 +9,7 @@ import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import SkjemagruppeQuestion from '../helpers/skjemagruppe-question/SkjemagruppeQuestion';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import TimeInput, { TimeInputLabels, TimeInputLayoutProps, TimeInputRefProps } from './TimeInput';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextFieldProps, 'name' | 'onChange'> {
     name: FieldName;
@@ -82,6 +83,7 @@ function FormikTimeInput<FieldName, ErrorType>({
                             {...restProps}
                             {...field}
                             {...timeInputLayout}
+                            {...inputPropsToRemove}
                             justifyContent="left"
                             time={field.value || undefined}
                             onChange={(time: Partial<InputTime> | undefined) => {
diff --git a/packages/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx b/packages/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx
index 88ba0c8a4d..b0c0d6340f 100644
--- a/packages/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx
+++ b/packages/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx
@@ -1,4 +1,5 @@
 import { TestProps, TypedFormInputValidationProps, YesOrNo } from '../../types';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 import FormikRadioGroup, { FormikRadioGroupProps } from '../formik-radio-group/FormikRadioGroup';
 
 export interface FormikYesOrNoQuestionProps<FieldName, ErrorType>
@@ -24,6 +25,7 @@ function FormikYesOrNoQuestion<FieldName, ErrorType>({
         <FormikRadioGroup<FieldName, ErrorType>
             data-testid={testKey}
             {...restProps}
+            {...inputPropsToRemove}
             renderHorizontal={renderHorizontal}
             radios={[
                 { label: yesLabel, value: YesOrNo.YES, ['data-testid']: testKey ? `${testKey}_yes` : undefined },
diff --git a/packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts b/packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts
new file mode 100644
index 0000000000..81a51f3083
--- /dev/null
+++ b/packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts
@@ -0,0 +1,8 @@
+/** Føringer fra Aksel om å ikke bruke noen props på inputs
+ *
+ * https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471
+ *
+ */
+export const inputPropsToRemove = {
+    // required: undefined,
+};
diff --git a/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx b/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx
index 63f2d17177..5b080b6bea 100644
--- a/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx
+++ b/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx
@@ -20,6 +20,7 @@ const defaultArgs: FormikRadioGroupProps<any, any> = {
     description: 'Choose any animal except the catty one',
     name: 'animals',
     radios: mockAnimalOptions,
+    required: true,
 };
 
 Default.args = {
diff --git a/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx b/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx
index 43c97955b2..6bf1b62c25 100644
--- a/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx
+++ b/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx
@@ -18,6 +18,7 @@ Default.args = {
     label: 'FormikTextField',
     name: 'FormikTextField',
     description: 'Some description i appropriate',
+    required: true,
 };
 Default.parameters = {
     formik: {