🚸 Make InfoElement props less strict to allow setting copyable/capita…

…lize dynamically
equinor · Oct 17, 2024 · 8da1e25 · 8da1e25
1 parent cde6ebe
commit 8da1e25
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 38 deletions.
diff --git a/src/molecules/InfoElement/InfoElement.test.tsx b/src/molecules/InfoElement/InfoElement.test.tsx
@@ -62,3 +62,25 @@ test('Capitalizing content works as expected', () => {
 
   expect(screen.getByText(expectedContentString)).toBeInTheDocument();
 });
+
+test('Copyable / capitalize content and ReactElement throws error', () => {
+  console.error = vi.fn();
+  expect(() =>
+    render(
+      <InfoElement
+        title="TestTitle"
+        content={<Button>Click me!</Button>}
+        copyableContent
+      />
+    )
+  ).toThrowError();
+  expect(() =>
+    render(
+      <InfoElement
+        title="TestTitle"
+        content={<Button>Click me!</Button>}
+        capitalizeContent
+      />
+    )
+  ).toThrowError();
+});
diff --git a/src/molecules/InfoElement/InfoElement.tsx b/src/molecules/InfoElement/InfoElement.tsx
@@ -5,50 +5,47 @@ import CopyText from 'src/molecules/InfoElement/CopyText';
 
 export interface InfoElementProps {
   title: string;
+  content: string | ReactElement;
+  capitalizeContent?: boolean;
+  copyableContent?: boolean;
 }
 
 /**
- * @param content - Text
- * @param copyableContent - Should the content be copyable via hover - Defaults to false
- * @param capitalizeContent - Should the content be capitalized - Defaults to false
+ * @param title - String
+ * @param content - String | ReactElement
+ * @param copyableContent - Should the content be copyable via hover - Defaults to false (only works when content is string)
+ * @param capitalizeContent - Should the content be capitalized - Defaults to false (only works when content is string)
  */
-interface TextInfoElementProps extends InfoElementProps {
-  content: string;
-  copyableContent?: boolean;
-  capitalizeContent?: boolean;
-}
+export const InfoElement = forwardRef<HTMLDivElement, InfoElementProps>(
+  ({ title, content, copyableContent, capitalizeContent }, ref) => {
+    if (typeof content !== 'string' && (copyableContent || capitalizeContent)) {
+      throw new Error(
+        'copyableContent and capitalizeContent only works when content is string'
+      );
+    }
 
-interface CustomInfoElementProps extends InfoElementProps {
-  content: ReactElement;
-  copyableContent?: false;
-  capitalizeContent?: false;
-}
+    const contentElement =
+      typeof content === 'string' ? (
+        <Typography variant="h6">
+          {capitalizeContent ? content.toUpperCase() : content}
+        </Typography>
+      ) : (
+        content
+      );
 
-export const InfoElement = forwardRef<
-  HTMLDivElement,
-  TextInfoElementProps | CustomInfoElementProps
->(({ title, content, copyableContent, capitalizeContent }, ref) => {
-  const contentElement =
-    typeof content === 'string' ? (
-      <Typography variant="h6">
-        {capitalizeContent ? content.toUpperCase() : content}
-      </Typography>
-    ) : (
-      content
+    return (
+      <div ref={ref}>
+        <Typography group="paragraph" variant="overline">
+          {title?.toUpperCase()}
+        </Typography>
+        {copyableContent && typeof content === 'string' ? (
+          <CopyText textToCopy={content}>{contentElement}</CopyText>
+        ) : (
+          contentElement
+        )}
+      </div>
     );
-
-  return (
-    <div ref={ref}>
-      <Typography group="paragraph" variant="overline">
-        {title?.toUpperCase()}
-      </Typography>
-      {copyableContent ? (
-        <CopyText textToCopy={content}>{contentElement}</CopyText>
-      ) : (
-        contentElement
-      )}
-    </div>
-  );
-});
+  }
+);
 
 InfoElement.displayName = 'InfoElement';