From 9006e8a750b42f97ee1ebe0d8e40cdeb357c36b1 Mon Sep 17 00:00:00 2001
From: Filip Hlavac <filip.hlavac01@gmail.com>
Date: Mon, 13 Jan 2025 18:27:24 +0100
Subject: [PATCH 1/2] fix: allow React node in ContentHeader

---
 .../src/ContentHeader/ContentHeader.tsx       | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx
index ab4cf3d3..e332ed63 100644
--- a/packages/module/src/ContentHeader/ContentHeader.tsx
+++ b/packages/module/src/ContentHeader/ContentHeader.tsx
@@ -24,9 +24,9 @@ export interface PageHeaderLinkProps extends ButtonProps {
 
 export interface ContentHeaderProps extends React.PropsWithChildren {
   /** Title for content header */
-  title: string;
+  title: React.ReactNode;
   /** Optional subtitle for content header */
-  subtitle?: string;
+  subtitle?: React.ReactNode;
   /** Optional link below subtitle */
   linkProps?: PageHeaderLinkProps;
   /** Optional icon for content header (appears to the left of the content header's title with a divider) */
@@ -50,8 +50,8 @@ const useStyles = createUseStyles({
 });
 
 export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<ContentHeaderProps>> = ({
-  title,
-  subtitle,
+  title = null,
+  subtitle = null,
   linkProps,
   icon,
   label,
@@ -64,7 +64,7 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
 
   return (
     <PageSection variant="light">
-      { breadcrumbs && (
+      {breadcrumbs && (
         <div className="pf-v5-u-mb-md">
           {breadcrumbs}
         </div>
@@ -84,9 +84,11 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
           <Split hasGutter>
             <SplitItem>
               <TextContent>
-                <Text className="pf-v5-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
-                  {title}
-                </Text>
+                {typeof title === 'string' ? (
+                  <Text className="pf-v5-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
+                    {title}
+                  </Text>
+                ) : title}
               </TextContent>
             </SplitItem>
             {label && (
@@ -102,13 +104,21 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
             )}
           </Split>
           <TextContent>
-            {subtitle && (
+            {typeof subtitle === 'string' ? (
               <Text component="p" ouiaId={`${ouiaId}-subtitle`}>
                 {subtitle}
               </Text>
-            )}
+            ) : subtitle}
             {linkProps && (
-              <Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={linkProps.isExternal ? <ExternalLinkAltIcon className='pf-v5-u-ml-sm' /> : null} iconPosition="end" {...linkProps}>
+              <Button
+                variant={ButtonVariant.link}
+                component="a"
+                ouiaId={`${ouiaId}-link-button`}
+                isInline
+                icon={linkProps.isExternal ? <ExternalLinkAltIcon className='pf-v5-u-ml-sm' /> : null}
+                iconPosition="end"
+                {...linkProps}
+              >
                 {linkProps.label}
               </Button>
             )}
@@ -117,6 +127,7 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
       </Flex>
       {children}
     </PageSection>
-  )};
+  );
+};
 
 export default ContentHeader;

From e1cb330707fc4a6e9338fb072c94403d9de535c9 Mon Sep 17 00:00:00 2001
From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com>
Date: Mon, 13 Jan 2025 18:32:45 +0100
Subject: [PATCH 2/2] Update
 packages/module/src/ContentHeader/ContentHeader.tsx

---
 packages/module/src/ContentHeader/ContentHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx
index e332ed63..57689558 100644
--- a/packages/module/src/ContentHeader/ContentHeader.tsx
+++ b/packages/module/src/ContentHeader/ContentHeader.tsx
@@ -50,7 +50,7 @@ const useStyles = createUseStyles({
 });
 
 export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<ContentHeaderProps>> = ({
-  title = null,
+  title,
   subtitle = null,
   linkProps,
   icon,