feat: Add StudioErrorMessage component

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';
@@ -18,6 +18,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';