digdir · mimarz · Sep 21, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
@@ -3,6 +3,7 @@ export * from './legacy/LegacyCheckbox';
 export * from './legacy/LegacyCheckboxGroup';
 export * from './legacy/LegacyRadioButton';
 export * from './legacy/LegacyRadioGroup';
+export * from './legacy/LegacyTextField';
 
 export * from './Button';
 export * from './Tabs';
@@ -11,7 +12,6 @@ export * from './Popover';
 export * from './Select';
 export * from './Spinner';
 export * from './TextArea';
-export * from './TextField';
 export * from './Link';
 export * from './List';
 export * from './Table';

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { TextField } from '../../TextField';
+import { LegacyTextField } from '../LegacyTextField';
 
 import { LegacyFieldSet } from './FieldSet';
 
@@ -13,8 +13,8 @@ export default {
 export const Eksempel: StoryFn<typeof LegacyFieldSet> = (args) => (
   <LegacyFieldSet {...args}>
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <TextField label='Navn' />
-      <TextField
+      <LegacyTextField label='Navn' />
+      <LegacyTextField
         type='date'
         label='Fødselsdato'
       />

@@ -1,23 +1,26 @@
 import { Meta, Canvas, Story, Primary, Controls } from '@storybook/blocks';
 import { TextField } from './';
-import { Information, TokensTable } from '../../../../../docs-components';
+import { Information, TokensTable } from '../../../../../../docs-components';
 import { ArgsTable } from '@storybook/blocks';
 import * as TextFieldStories from './TextField.stories';
 
 <Meta of={TextFieldStories} />
 
-# TextField
+# LegacyTextField
 
-<Information text='altinn' />
+<Information
+  text='deprecated'
+  description='**Denne komponenten er erstattet av ny [Textfield](/docs/felles-textfield--docs) komponent.**'
+/>
 
 `TextField` er en tekstboks som tar imot korte, rene tekster uten linjeskift. For lengre tekster, bruk `TextArea`.
 
 ## Bruk
 
 ```tsx
-import { TextField } from '@digdir/design-system-react';
+import { LegacyTextField } from '@digdir/design-system-react';
 
-<TextField {...props} />;
+<LegacyTextField {...props} />;
 ```
 
 ## Props

@@ -1,20 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import type { TextFieldProps } from '.';
-import { TextField } from '.';
+import type { LegacyTextFieldProps } from '.';
+import { LegacyTextField } from '.';
 
-type Story = StoryObj<typeof TextField>;
+type Story = StoryObj<typeof LegacyTextField>;
 
-const meta: Meta<typeof TextField> = {
-  title: 'Altinn/TextField',
-  component: TextField,
+const meta: Meta<typeof LegacyTextField> = {
+  title: 'Avviklet/LegacyTextField',
+  component: LegacyTextField,
 };
 
 export default meta;
 
-const createTemplate = (name: string, args?: TextFieldProps): Story => ({
-  render: (args) => <TextField {...args} />,
+const createTemplate = (name: string, args?: LegacyTextFieldProps): Story => ({
+  render: (args) => <LegacyTextField {...args} />,
   args,
   name,
 });

@@ -2,8 +2,8 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
-import type { TextFieldProps } from './TextField';
-import { TextField } from './TextField';
+import type { LegacyTextFieldProps } from './TextField';
+import { LegacyTextField } from './TextField';
 
 const user = userEvent.setup();
 
@@ -172,7 +172,7 @@ describe('TextField', () => {
       expect(screen.getByDisplayValue('$1 234')).toBeInTheDocument();
       expect(onChange).not.toHaveBeenCalled();
       rerender(
-        <TextField
+        <LegacyTextField
           onChange={onChange}
           value='12345'
           formatting={{ number: { prefix: '$', thousandSeparator: ' ' } }}
@@ -301,11 +301,11 @@ describe('TextField', () => {
   });
 });
 
-const render = (props: Partial<TextFieldProps> = {}) => {
+const render = (props: Partial<LegacyTextFieldProps> = {}) => {
   const allProps = {
     onChange: jest.fn(),
     ...props,
-  } as TextFieldProps;
+  } as LegacyTextFieldProps;
 
-  return renderRtl(<TextField {...allProps} />);
+  return renderRtl(<LegacyTextField {...allProps} />);
 };
@@ -9,11 +9,11 @@ import type {
 } from 'react-number-format';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 
-import { isNumericFormat, isPatternFormat } from '../../utils';
-import { InputWrapper } from '../_InputWrapper';
-import type { ReadOnlyVariant_, CharacterLimit } from '../_InputWrapper';
+import { isNumericFormat, isPatternFormat } from '../../../utils';
+import { InputWrapper } from '../../_InputWrapper';
+import type { ReadOnlyVariant_, CharacterLimit } from '../../_InputWrapper';
 
-export type TextFieldProps = {
+export type LegacyTextFieldProps = {
   /**
    *  The characterLimit function calculates remaining characters.
    *  Provide a `label` function that takes count as parameter and returns a message.
@@ -25,7 +25,7 @@ export type TextFieldProps = {
   defaultValue?: string | number;
 
   /** The formatting options for the text field. */
-  formatting?: TextFieldFormatting;
+  formatting?: LegacyTextFieldFormatting;
 
   /** Specifies whether the value of the text field is valid. */
   isValid?: boolean;
@@ -65,7 +65,7 @@ export type TextFieldProps = {
   'readOnly' | 'value' | 'defaultValue' | 'type'
 >; // Todo: We should extend the props of <input> here, but it's complex because of the number format implementation. We should move that out to a separate component first.
 
-export type TextFieldFormatting = {
+export type LegacyTextFieldFormatting = {
   align?: 'right' | 'center' | 'left';
   number?: NumericFormatProps | PatternFormatProps;
 };
@@ -91,7 +91,10 @@ const replaceTargetValueWithUnformattedValue = ({
     },
   };
 };
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+export const LegacyTextField = forwardRef<
+  HTMLInputElement,
+  LegacyTextFieldProps
+>(
   (
     {
       id,
@@ -107,7 +110,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       characterLimit,
       'aria-describedby': ariaDescribedBy,
       ...rest
-    }: TextFieldProps,
+    }: LegacyTextFieldProps,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const [currentValue, setCurrentValue] = useState<string>(

@@ -0,0 +1,5 @@
+export { LegacyTextField } from './TextField';
+export type {
+  LegacyTextFieldProps,
+  LegacyTextFieldFormatting,
+} from './TextField';