From 956ac61d9b01807afcfe1cbd1fba947c9192565d Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 21 Sep 2023 12:47:46 +0200 Subject: [PATCH] =?UTF-8?q?feat(TextField):=20=F0=9F=97=91=EF=B8=8F=20Chan?= =?UTF-8?q?ge=20to=20Legacy=20(#838)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react/src/components/TextField/index.ts | 2 -- packages/react/src/components/index.ts | 2 +- .../legacy/LegacyCheckbox/Checkbox.mdx | 2 +- .../CheckboxGroup.stories.mdx | 2 +- .../LegacyCheckboxGroup/CheckboxGroup.tsx | 5 ++++ .../legacy/LegacyFieldSet/FieldSet.mdx | 2 +- .../LegacyFieldSet/FieldSet.stories.tsx | 6 ++--- .../legacy/LegacyFieldSet/FieldSet.tsx | 2 +- .../LegacyRadioButton/RadioButton.stories.mdx | 2 +- .../legacy/LegacyRadioButton/RadioButton.tsx | 2 +- .../LegacyRadioGroup/RadioGroup.stories.mdx | 2 +- .../legacy/LegacyRadioGroup/RadioGroup.tsx | 2 +- .../LegacyTextField}/TextField.mdx | 13 ++++++---- .../LegacyTextField}/TextField.stories.tsx | 16 ++++++------ .../LegacyTextField}/TextField.test.tsx | 12 ++++----- .../LegacyTextField}/TextField.tsx | 25 +++++++++++++------ .../legacy/LegacyTextField/index.ts | 5 ++++ 17 files changed, 61 insertions(+), 41 deletions(-) delete mode 100644 packages/react/src/components/TextField/index.ts rename packages/react/src/components/{TextField => legacy/LegacyTextField}/TextField.mdx (78%) rename packages/react/src/components/{TextField => legacy/LegacyTextField}/TextField.stories.tsx (78%) rename packages/react/src/components/{TextField => legacy/LegacyTextField}/TextField.test.tsx (97%) rename packages/react/src/components/{TextField => legacy/LegacyTextField}/TextField.tsx (90%) create mode 100644 packages/react/src/components/legacy/LegacyTextField/index.ts diff --git a/packages/react/src/components/TextField/index.ts b/packages/react/src/components/TextField/index.ts deleted file mode 100644 index 03fca4ab6a..0000000000 --- a/packages/react/src/components/TextField/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TextField } from './TextField'; -export type { TextFieldProps, TextFieldFormatting } from './TextField'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 71eb4e5dd5..809d019ddf 100644 --- a/packages/react/src/components/index.ts +++ b/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'; diff --git a/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx b/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx index c45b029f4c..5595236ed3 100644 --- a/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx +++ b/packages/react/src/components/legacy/LegacyCheckbox/Checkbox.mdx @@ -10,7 +10,7 @@ import { Controls, Primary } from '@storybook/blocks'; `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. diff --git a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx index 59b8630d5e..830b2fb1cb 100644 --- a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx +++ b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.stories.mdx @@ -80,7 +80,7 @@ export const Template = (args = {}) => ( `LegacyCheckboxGroup` er en gruppe med sjekkbokser som gir brukeren mulighet til å velge flere verdier i en liste. diff --git a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx b/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx index 12408ca572..746748afac 100644 --- a/packages/react/src/components/legacy/LegacyCheckboxGroup/CheckboxGroup.tsx +++ b/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 }; diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx index ad3e2ad41f..18e048ec67 100644 --- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx +++ b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.mdx @@ -8,7 +8,7 @@ import * as FieldSetStories from './FieldSet.stories'; `LegacyFieldSet` brukes til å gruppere innhold i et skjema. diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx index 447273904f..d19d8e1ca7 100644 --- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.stories.tsx +++ b/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 = (args) => (
- - + diff --git a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx b/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx index ca29fb8465..629003da94 100644 --- a/packages/react/src/components/legacy/LegacyFieldSet/FieldSet.tsx +++ b/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( ( diff --git a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx index 72b5a1f3dc..306501ad76 100644 --- a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx +++ b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.stories.mdx @@ -81,7 +81,7 @@ export const Template = (args = {}) => ( `LegacyRadioButton` er en knapp som skal brukes i kombinasjon med andre radioknapper for å velge mellom flere alternativer. diff --git a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx b/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx index e4ab7b4d28..db9e00b493 100644 --- a/packages/react/src/components/legacy/LegacyRadioButton/RadioButton.tsx +++ b/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( ( diff --git a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx index 732d59f64a..385702fbef 100644 --- a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx +++ b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.stories.mdx @@ -83,7 +83,7 @@ export const Template = (args = {}) => ( `LegacyRadioGroup` er en gruppe med radioknapper som gir brukeren mulighet til å velge ett av flere alternativer. diff --git a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx b/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx index fe2d76f6a7..84ab3125e2 100644 --- a/packages/react/src/components/legacy/LegacyRadioGroup/RadioGroup.tsx +++ b/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, diff --git a/packages/react/src/components/TextField/TextField.mdx b/packages/react/src/components/legacy/LegacyTextField/TextField.mdx similarity index 78% rename from packages/react/src/components/TextField/TextField.mdx rename to packages/react/src/components/legacy/LegacyTextField/TextField.mdx index 4f3c9630ce..b2be251506 100644 --- a/packages/react/src/components/TextField/TextField.mdx +++ b/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'; -# TextField +# LegacyTextField - + `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'; -; +; ``` ## Props diff --git a/packages/react/src/components/TextField/TextField.stories.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx similarity index 78% rename from packages/react/src/components/TextField/TextField.stories.tsx rename to packages/react/src/components/legacy/LegacyTextField/TextField.stories.tsx index a9808d2f7c..4082a8074d 100644 --- a/packages/react/src/components/TextField/TextField.stories.tsx +++ b/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; +type Story = StoryObj; -const meta: Meta = { - title: 'Altinn/TextField', - component: TextField, +const meta: Meta = { + title: 'Avviklet/LegacyTextField', + component: LegacyTextField, }; export default meta; -const createTemplate = (name: string, args?: TextFieldProps): Story => ({ - render: (args) => , +const createTemplate = (name: string, args?: LegacyTextFieldProps): Story => ({ + render: (args) => , args, name, }); diff --git a/packages/react/src/components/TextField/TextField.test.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx similarity index 97% rename from packages/react/src/components/TextField/TextField.test.tsx rename to packages/react/src/components/legacy/LegacyTextField/TextField.test.tsx index eeb39582f9..ebd477d023 100644 --- a/packages/react/src/components/TextField/TextField.test.tsx +++ b/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( - { }); }); -const render = (props: Partial = {}) => { +const render = (props: Partial = {}) => { const allProps = { onChange: jest.fn(), ...props, - } as TextFieldProps; + } as LegacyTextFieldProps; - return renderRtl(); + return renderRtl(); }; diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/legacy/LegacyTextField/TextField.tsx similarity index 90% rename from packages/react/src/components/TextField/TextField.tsx rename to packages/react/src/components/legacy/LegacyTextField/TextField.tsx index 22f10cb4b6..1ec52b5b6f 100644 --- a/packages/react/src/components/TextField/TextField.tsx +++ b/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 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( + +/** + * + * @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( characterLimit, 'aria-describedby': ariaDescribedBy, ...rest - }: TextFieldProps, + }: LegacyTextFieldProps, ref: ForwardedRef, ) => { const [currentValue, setCurrentValue] = useState( diff --git a/packages/react/src/components/legacy/LegacyTextField/index.ts b/packages/react/src/components/legacy/LegacyTextField/index.ts new file mode 100644 index 0000000000..521d578804 --- /dev/null +++ b/packages/react/src/components/legacy/LegacyTextField/index.ts @@ -0,0 +1,5 @@ +export { LegacyTextField } from './TextField'; +export type { + LegacyTextFieldProps, + LegacyTextFieldFormatting, +} from './TextField';