From 4ec6f7ba15b6df444eba4a56759fc9f195f73868 Mon Sep 17 00:00:00 2001
From: Heikki Hellgren <heikki.hellgren@op.fi>
Date: Tue, 26 Nov 2024 21:43:42 +0200
Subject: [PATCH 1/2] 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         |  5 +++
 packages/core-components/report-alpha.api.md  |  2 +-
 .../layout/ContentHeader/ContentHeader.tsx    | 38 ++++++++++++++++---
 3 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/nervous-onions-complain.md

diff --git a/.changeset/nervous-onions-complain.md b/.changeset/nervous-onions-complain.md
new file mode 100644
index 0000000000..39fd089222
--- /dev/null
+++ b/.changeset/nervous-onions-complain.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Allow passing component for `ContentHeader` description
diff --git a/packages/core-components/report-alpha.api.md b/packages/core-components/report-alpha.api.md
index 1f4b999232..2984c1c72f 100644
--- a/packages/core-components/report-alpha.api.md
+++ b/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';
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
index e2a6e70620..1e8ab5e3ff 100644
--- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+++ b/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>

From e19f47f808956e86a164c0dd39c5fe078514a31a Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 14 Jan 2025 09:05:52 +0100
Subject: [PATCH 2/2] chore: updating api-reports

Signed-off-by: blam <ben@blam.sh>
---
 packages/core-components/report-alpha.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core-components/report-alpha.api.md b/packages/core-components/report-alpha.api.md
index 2984c1c72f..1f4b999232 100644
--- a/packages/core-components/report-alpha.api.md
+++ b/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';