refactor: move Text to form-component lib

libs/form-component/src/app-components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import type { PropsWithChildren, Ref } from 'react';
 
 import { Button as DesignSystemButton } from '@digdir/designsystemet-react';

libs/form-component/src/app-components/DisplayText/DisplayText.module.css

@@ -0,0 +1,4 @@
+.icon {
+  width: 24px;
+  margin-right: 12px;
+}

libs/form-component/src/app-components/DisplayText/DisplayText.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DisplayText } from './DisplayText';
+
+const meta = {
+  title: 'AppComponents/DisplayText',
+  component: DisplayText,
+  args: {
+    value: 'Hello world',
+  },
+} satisfies Meta<typeof DisplayText>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {};
+
+export const WithIcon: Story = {
+  args: {
+    iconUrl: 'https://altinncdn.no/orgs/digdir/digdir.png',
+    iconAltText: 'Info icon',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    labelId: 'text-label',
+  },
+  render: (args) => (
+    <>
+      <span id='text-label'>Description</span>
+      <DisplayText {...args} />
+    </>
+  ),
+};
+
+export const EmptyValue: Story = {
+  args: {
+    value: '',
+  },
+};

libs/form-component/src/app-components/DisplayText/DisplayText.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+
+import { DisplayText } from './DisplayText';
+
+describe('DisplayText', () => {
+  it('renders the value inside a span', () => {
+    render(<DisplayText value='Hello world' />);
+
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it('renders an icon with alt text when iconUrl is provided', () => {
+    render(<DisplayText value='Hello world' iconUrl='/icon.svg' iconAltText='Info icon' />);
+
+    const icon = screen.getByRole('img', { name: 'Info icon' });
+    expect(icon).toHaveAttribute('src', '/icon.svg');
+  });
+
+  it('omits the icon when iconUrl is not provided', () => {
+    render(<DisplayText value='Hello world' iconAltText='unused' />);
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('associates the value span with labelId via aria-labelledby', () => {
+    render(<DisplayText value='Hello world' labelId='text-label' />);
+
+    expect(screen.getByText('Hello world')).toHaveAttribute('aria-labelledby', 'text-label');
+  });
+});

libs/form-component/src/app-components/DisplayText/DisplayText.tsx

@@ -0,0 +1,17 @@
+import classes from './DisplayText.module.css';
+
+export type DisplayTextProps = {
+  value: string;
+  iconUrl?: string;
+  iconAltText?: string;
+  labelId?: string;
+};
+
+export function DisplayText({ value, iconUrl, iconAltText, labelId }: DisplayTextProps) {
+  return (
+    <>
+      {iconUrl && <img src={iconUrl} className={classes.icon} alt={iconAltText} />}
+      <span aria-labelledby={labelId}>{value}</span>
+    </>
+  );
+}

libs/form-component/src/app-components/DisplayText/index.ts

@@ -0,0 +1,2 @@
+export { DisplayText } from './DisplayText';
+export type { DisplayTextProps } from './DisplayText';

libs/form-component/src/app-components/Input/index.ts

@@ -2,4 +2,3 @@ export { Input } from './Input';
 export type { InputProps } from './Input';
 export { FormattedInput } from './FormattedInput';
 export { NumericInput } from './NumericInput';
-

libs/form-component/src/app-components/index.ts

@@ -6,6 +6,7 @@ export * from './Flex';
 export * from './Input';
 export * from './hooks';
 export * from './DisplayDate';
+export * from './DisplayText';
 export * from './DisplayNumber';
 export * from './Spinner';
 export * from './TextArea';

src/App/frontend/src/app-components/Text/Text.module.css → src/App/frontend/src/layout/Text/Text.module.css

@@ -7,11 +7,6 @@
 .label span {
   font-size: var(--ds-body-md-font-size);
 }
-
-.icon {
-  width: 24px;
-  margin-right: 12px;
-}
 .vertical {
   flex-direction: column;
 }

src/App/frontend/src/layout/Text/TextComponent.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 
+import { DisplayText } from '@app/form-component';
 import cn from 'classnames';
 
-import { DisplayText } from 'src/app-components/Text/DisplayText';
-import classes from 'src/app-components/Text/Text.module.css';
-import { translationKey } from 'src/AppComponentsBridge';
 import { getLabelId } from 'src/components/label/Label';
+import { useLanguage } from 'src/features/language/useLanguage';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/Text/Text.module.css';
 import { useItemWhenType } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export const TextComponent = ({ baseComponentId }: PropsFromGenericComponent<'Text'>) => {
   const { id, textResourceBindings, value, icon, direction: _direction } = useItemWhenType(baseComponentId, 'Text');
   const direction = _direction ?? 'horizontal';
+  const { langAsString } = useLanguage();
 
   if (!textResourceBindings?.title) {
     return <DisplayText value={value} />;
@@ -34,7 +35,7 @@ export const TextComponent = ({ baseComponentId }: PropsFromGenericComponent<'Te
       <DisplayText
         value={value}
         iconUrl={icon}
-        iconAltText={translationKey(textResourceBindings.title)}
+        iconAltText={langAsString(textResourceBindings.title)}
         labelId={getLabelId(id)}
       />
     </ComponentStructureWrapper>