feat: allow passing component for description in ContentHeader

sometimes it's necessary to add other than plain typography in the
description for ContentHeader.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/nervous-onions-complain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Allow passing component for `ContentHeader` description

packages/core-components/report-alpha.api.md

@@ -14,10 +14,10 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'signIn.title': 'Sign In';
     readonly 'signIn.loginFailed': 'Login failed';
     readonly 'signIn.customProvider.title': 'Custom User';
+    readonly 'signIn.customProvider.continue': 'Continue';
     readonly 'signIn.customProvider.subtitle': 'Enter your own User ID and credentials.\n This selection will not be stored.';
     readonly 'signIn.customProvider.userId': 'User ID';
     readonly 'signIn.customProvider.tokenInvalid': 'Token is not a valid OpenID Connect JWT Token';
-    readonly 'signIn.customProvider.continue': 'Continue';
     readonly 'signIn.customProvider.idToken': 'ID Token (optional)';
     readonly 'signIn.guestProvider.title': 'Guest';
     readonly 'signIn.guestProvider.enter': 'Enter';

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -84,10 +84,30 @@ const ContentHeaderTitle = ({ title, className }: ContentHeaderTitleProps) => (
   </Typography>
 );
 
+type ContentHeaderDescriptionProps = {
+  description?: string;
+  className?: string;
+};
+
+const ContentHeaderDescription = ({
+  description,
+  className,
+}: ContentHeaderDescriptionProps) =>
+  description ? (
+    <Typography
+      variant="body2"
+      className={className}
+      data-testid="header-description"
+    >
+      {description}
+    </Typography>
+  ) : null;
+
 type ContentHeaderProps = {
   title?: ContentHeaderTitleProps['title'];
   titleComponent?: ReactNode;
-  description?: string;
+  description?: ContentHeaderDescriptionProps['description'];
+  descriptionComponent?: ReactNode;
   textAlign?: 'left' | 'right' | 'center';
 };
 
@@ -104,6 +124,7 @@ export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
     title,
     titleComponent: TitleComponent = undefined,
     children,
+    descriptionComponent: DescriptionComponent = undefined,
     textAlign = 'left',
   } = props;
   const classes = useStyles({ textAlign })();
@@ -114,17 +135,22 @@ export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
     <ContentHeaderTitle title={title} className={classes.title} />
   );
 
+  const renderedDescription = DescriptionComponent ? (
+    DescriptionComponent
+  ) : (
+    <ContentHeaderDescription
+      description={description}
+      className={classes.description}
+    />
+  );
+
   return (
     <>
       <Helmet title={title} />
       <Box className={classes.container}>
         <Box className={classes.leftItemsBox}>
           {renderedTitle}
-          {description && (
-            <Typography className={classes.description} variant="body2">
-              {description}
-            </Typography>
-          )}
+          {renderedDescription}
         </Box>
         <Box className={classes.rightItemsBox}>{children}</Box>
       </Box>