feat(TextField): 🗑️ Change to Legacy (#838)

packages/react/src/components/index.ts

@@ -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';

packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx

@@ -10,7 +10,7 @@ import { Controls, Primary } from '@storybook/blocks';
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Checkbox](/docs/felles-checkbox--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Checkbox](/?path=/docs/felles-checkbox--docs) komponent.**'
 />
 
 `LegacyCheckbox` er en boks som brukeren kan krysse av i for bolske verdier. Den kan også brukes i en gruppe hvor brukeren kan velge flere verdier.

packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx

@@ -80,7 +80,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Checkbox.Group](/docs/felles-checkbox--docs#checkboxgroup) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Checkbox.Group](/?path=/docs/felles-checkbox--docs#checkboxgroup) komponent.**'
 />
 
 `LegacyCheckboxGroup` er en gruppe med sjekkbokser som gir brukeren mulighet til å velge flere verdier i en liste.

packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx

@@ -136,4 +136,9 @@ const LegacyCheckboxGroup = ({
 
 LegacyCheckboxGroup.displayName = 'LegacyCheckboxGroup';
 
+/**
+ *
+ * @note
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-checkbox-group--docs Checkbox.Group} component.
+ */
 export { LegacyCheckboxGroup };

packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx

@@ -8,7 +8,7 @@ import * as FieldSetStories from './FieldSet.stories';
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Fieldset](/docs/felles-fieldset--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Fieldset](/?path=/docs/felles-fieldset--docs) komponent.**'
 />
 
 `LegacyFieldSet` brukes til å gruppere innhold i et skjema.

packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx

@@ -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'
       />

packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx

@@ -38,7 +38,7 @@ export type LegacyFieldSetProps = {
 /**
  *
  * @note
- * Will be replaced by new Fieldset component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-fieldset--docs Fieldset} component.
  */
 const LegacyFieldSet = forwardRef<HTMLFieldSetElement, LegacyFieldSetProps>(
   (

packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx

@@ -81,7 +81,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Radio](/docs/felles-radio--docs) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Radio](/?path=/docs/felles-radio--docs) komponent.**'
 />
 
 `LegacyRadioButton` er en knapp som skal brukes i kombinasjon med andre radioknapper for å velge mellom flere alternativer.

packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx

@@ -26,7 +26,7 @@ export interface LegacyRadioButtonProps {
 /**
  *
  * @note
- * Will be replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio--docs Radio} component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio--docs Radio} component.
  */
 const LegacyRadioButton = forwardRef<HTMLInputElement, LegacyRadioButtonProps>(
   (

packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx

@@ -83,7 +83,7 @@ export const Template = (args = {}) => (
 
 <Information
   text='deprecated'
-  description='**Denne komponenten er erstattet av ny [Radio.Group](/docs/felles-radio--docs#radiogroup) komponent.**'
+  description='**Denne komponenten er erstattet av ny [Radio.Group](/?path=/docs/felles-radio--docs#radiogroup) komponent.**'
 />
 
 `LegacyRadioGroup` er en gruppe med radioknapper som gir brukeren mulighet til å velge ett av flere alternativer.

packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx

@@ -33,7 +33,7 @@ export interface LegacyRadioGroupProps {
 /**
  *
  * @note
- * Will be replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio-group--docs Radio.Group} component.
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-radio-group--docs Radio.Group} component.
  */
 const LegacyRadioGroup = ({
   description,

packages/react/src/components/TextField/TextField.mdx → packages/react/src/components/legacy/LegacyTextField/TextField.mdx

@@ -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](/?path=/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

packages/react/src/components/TextField/TextField.stories.tsx → packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx

@@ -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,
 });

packages/react/src/components/TextField/TextField.test.tsx → packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx

@@ -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} />);
 };

packages/react/src/components/TextField/TextField.tsx → packages/react/src/components/legacy/LegacyTextField/TextField.tsx

@@ -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,16 @@ const replaceTargetValueWithUnformattedValue = ({
     },
   };
 };
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+
+/**
+ *
+ * @note
+ * Replaced by new {@link https://digdir.github.io/designsystem/?path=/docs/felles-textfield--docs Textfield} component.
+ */
+export const LegacyTextField = forwardRef<
+  HTMLInputElement,
+  LegacyTextFieldProps
+>(
   (
     {
       id,
@@ -107,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       characterLimit,
       'aria-describedby': ariaDescribedBy,
       ...rest
-    }: TextFieldProps,
+    }: LegacyTextFieldProps,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const [currentValue, setCurrentValue] = useState<string>(

packages/react/src/components/legacy/LegacyTextField/index.ts

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