From 6fcee73323ea1af4c19a7542613d9bf902d0d3b4 Mon Sep 17 00:00:00 2001
From: Tomas <tomas.engebretsen@gmail.com>
Date: Tue, 29 Oct 2024 14:31:28 +0100
Subject: [PATCH] feat: Add StudioErrorMessage component

---
 .../StudioErrorMessage.test.tsx               | 36 +++++++++++++++++++
 .../StudioErrorMessage/StudioErrorMessage.tsx | 11 ++++++
 .../components/StudioErrorMessage/index.ts    |  1 +
 .../studio-components/src/components/index.ts |  3 +-
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.test.tsx
 create mode 100644 frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.tsx
 create mode 100644 frontend/libs/studio-components/src/components/StudioErrorMessage/index.ts

diff --git a/frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.test.tsx b/frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.test.tsx
new file mode 100644
index 00000000000..9b389e23958
--- /dev/null
+++ b/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} />);
diff --git a/frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.tsx b/frontend/libs/studio-components/src/components/StudioErrorMessage/StudioErrorMessage.tsx
new file mode 100644
index 00000000000..9c368239725
--- /dev/null
+++ b/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';
diff --git a/frontend/libs/studio-components/src/components/StudioErrorMessage/index.ts b/frontend/libs/studio-components/src/components/StudioErrorMessage/index.ts
new file mode 100644
index 00000000000..55c5c43446d
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioErrorMessage/index.ts
@@ -0,0 +1 @@
+export * from './StudioErrorMessage';
diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts
index ecb388eda43..c6e46fe7e2d 100644
--- a/frontend/libs/studio-components/src/components/index.ts
+++ b/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';