feat: tup-612 isNestedHeader prop in <SectionHeader> (#335)

* feat: `isNestedHeader` prop in `<SectionHeader>` * fix: nested `<header>` tags
TACC · Nov 14, 2023 · 19e785e · 19e785e
1 parent fdf6705
commit 19e785e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/apps/tup-ui/src/pages/Projects/Projects.tsx b/apps/tup-ui/src/pages/Projects/Projects.tsx
@@ -20,7 +20,7 @@ const Layout: React.FC = () => {
       <section className={styles['project-section']}>
         <PageLayout
           top={
-            <SectionHeader actions={<NewProject />}>
+            <SectionHeader actions={<NewProject />} isNestedHeader>
               Projects & Allocations
             </SectionHeader>
           }

diff --git a/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx b/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx
@@ -42,9 +42,11 @@ function SectionHeader({
   isForForm,
   isForTable,
   isForList,
+  isNestedHeader,
 }) {
   let styleName = '';
   const styleNameList = [styles['root']];
+  const HeaderTagName = isNestedHeader ? 'div' : 'header';
   const HeadingTagName = isForForm || isForTable || isForList ? 'h2' : 'h1';
 
   if (isForForm) styleNameList.push(styles['for-form']);
@@ -55,14 +57,14 @@ function SectionHeader({
   styleName = styleNameList.join(' ');
 
   return (
-    <header className={`${className} ${styleName}`}>
+    <HeaderTagName className={`${className} ${styleName}`}>
       {children && (
         <HeadingTagName className={styles['heading']}>
           {children}
         </HeadingTagName>
       )}
       {actions}
-    </header>
+    </HeaderTagName>
   );
 }
 SectionHeader.propTypes = {

diff --git a/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx b/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx
@@ -86,7 +86,7 @@ export const ProjectHeader: React.FC<{ projectId: number }> = ({
 
   return (
     <div className={styles['project-header']}>
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         {isActive && <Link to={'/projects?show=active'}>Active Projects </Link>}
         {!isActive && (
           <Link to={'/projects?show=inactive'}>Inactive Projects </Link>

diff --git a/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx b/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx
@@ -17,14 +17,16 @@ export const SystemStatusHeader: React.FC<SystemDetailProps> = ({
 
   if (error)
     return (
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         <InlineMessage type="warn">
           System Status / Unable to retrieve system name
         </InlineMessage>
       </SectionHeader>
     );
 
   return (
-    <SectionHeader>System Status / {dataBySystem?.display_name}</SectionHeader>
+    <SectionHeader isNestedHeader>
+      System Status / {dataBySystem?.display_name}
+    </SectionHeader>
   );
 };