From 886629e665c26749aba4b0f6da2163405f33cc6e Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Mon, 26 Aug 2024 11:17:10 +0300
Subject: [PATCH] (feat) Extend PageHeader component to accept additional HTML
 attributes

---
 packages/framework/esm-framework/docs/API.md         |  2 +-
 .../src/page-header/page-header.component.tsx        | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
index 0da279562..1f6010591 100644
--- a/packages/framework/esm-framework/docs/API.md
+++ b/packages/framework/esm-framework/docs/API.md
@@ -2042,7 +2042,7 @@ on its own, and the PageHeaderContent component is not needed.
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:85](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L85)
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:89](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L89)
 
 ___
 
diff --git a/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx b/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
index 96a12604c..f80c2be4f 100644
--- a/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
+++ b/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
@@ -56,12 +56,16 @@ const isPageHeaderWrapperProps = (props: any): props is PageHeaderWrapperProps =
  */
 export const PageHeader: React.FC<PageHeaderProps> = (props) => {
   if (isPageHeaderWrapperProps(props)) {
-    const { children, className } = props;
-    return <div className={classNames(styles.pageHeader, className)}>{children}</div>;
+    const { children, className, ...rest } = props;
+    return (
+      <div className={classNames(styles.pageHeader, className)} {...rest}>
+        {children}
+      </div>
+    );
   } else {
-    const { title, illustration, className } = props;
+    const { title, illustration, className, ...rest } = props;
     return (
-      <div className={classNames(styles.pageHeader, className)}>
+      <div className={classNames(styles.pageHeader, className)} {...rest}>
         <PageHeaderContent title={title} illustration={illustration} />
       </div>
     );