feat: Add StudioErrorMessage component (#13943)

frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioErrorMessage } from './StudioErrorMessage';
+
+type Story = StoryFn<typeof StudioErrorMessage>;
+
+const meta: Meta = {
+  title: 'Components/StudioErrorMessage',
+  component: StudioErrorMessage,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+    children: {
+      control: 'text',
+    },
+  },
+};
+export const Preview: Story = (args): React.ReactElement => <StudioErrorMessage {...args} />;
+
+Preview.args = {
+  children: 'Lorem ipsum dolor sit amet.',
+  size: 'sm',
+};
+export default meta;

frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.test.tsx

@@ -0,0 +1,36 @@
+import type { ForwardedRef } from 'react';
+import React from 'react';
+import type { StudioErrorMessageProps } from './StudioErrorMessage';
+import { StudioErrorMessage } from './StudioErrorMessage';
+import { render, screen } from '@testing-library/react';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+
+// Test data:
+const errorMessage = 'Test error message';
+const defaultProps: StudioErrorMessageProps = { children: errorMessage };
+
+describe('StudioErrorMessage', () => {
+  it('Renders the given error message', () => {
+    renderErrorMessage();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('Forwards the ref', () => {
+    testRefForwarding<HTMLParagraphElement>((ref) => renderErrorMessage({}, ref));
+  });
+
+  it('Accepts custom attributes', () => {
+    testCustomAttributes<HTMLParagraphElement>(renderErrorMessage);
+  });
+
+  it('Applies the class name to the root element', () => {
+    testRootClassNameAppending((className) => renderErrorMessage({ className }));
+  });
+});
+
+const renderErrorMessage = (
+  props: StudioErrorMessageProps = {},
+  ref?: ForwardedRef<HTMLParagraphElement>,
+) => render(<StudioErrorMessage {...defaultProps} {...props} ref={ref} />);

frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { ErrorMessageProps } from '@digdir/designsystemet-react';
+import { ErrorMessage } from '@digdir/designsystemet-react';
+
+export type StudioErrorMessageProps = ErrorMessageProps;
+
+export const StudioErrorMessage = forwardRef<HTMLParagraphElement, StudioErrorMessageProps>(
+  (props, ref) => <ErrorMessage size='sm' {...props} ref={ref} />,
+);
+
+StudioErrorMessage.displayName = 'StudioErrorMessage';

frontend/libs/studio-components/src/components/StudioErrorMessage/index.ts

@@ -0,0 +1 @@
+export * from './StudioErrorMessage';

frontend/libs/studio-components/src/components/index.ts

@@ -1,5 +1,5 @@
-export * from './StudioAlert';
 export * from './StudioActionCloseButton';
+export * from './StudioAlert';
 export * from './StudioAnimateHeight';
 export * from './StudioAvatar';
 export * from './StudioBetaTag';
@@ -19,6 +19,7 @@ export * from './StudioDisplayTile';
 export * from './StudioDivider';
 export * from './StudioDropdownMenu';
 export * from './StudioError';
+export * from './StudioErrorMessage';
 export * from './StudioExpression';
 export * from './StudioFieldset';
 export * from './StudioFileUploader';