Removed title div

cerner · Apr 15, 2024 · 41f70b1 · 41f70b1
1 parent d8666fb
commit 41f70b1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 25 deletions.
diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Removed title div when value is not provided for text prop.
+
 ## 3.31.2 - (April 2, 2024)
 
 * Fixed

diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx
@@ -140,19 +140,19 @@ const Header = ({
     customProps.className,
   ]);
 
-  const renderTitle = !(!titleContent && startContent && endContent);
   const contentClassNames = wrapContent ? cx('flex-end-wrap') : cx('flex-end');
+  const endClassNames = cx({ 'end-content': !title });
 
   return (
     <header {...customProps} className={headerClassNames}>
       {startContent && <div className={contentClassNames}>{startContent}</div>}
-      {renderTitle && (
+      {titleContent && (
       <div className={cx('flex-fill')}>
         {titleElement}
       </div>
       )}
       {content}
-      {endContent && <div className={contentClassNames}>{endContent}</div>}
+      {endContent && <div className={`${contentClassNames} ${endClassNames}`}>{endContent}</div>}
     </header>
   );
 };

diff --git a/packages/terra-clinical-header/src/Header.module.scss b/packages/terra-clinical-header/src/Header.module.scss
@@ -51,6 +51,10 @@
     position: relative;
   }
 
+  .end-content {
+    margin-left: auto;
+  }
+
   .title-container {
     position: relative;
     width: 100%;

diff --git a/packages/terra-clinical-header/tests/jest/Header.test.jsx b/packages/terra-clinical-header/tests/jest/Header.test.jsx
@@ -41,23 +41,21 @@ it('should render a header with heading level', () => {
 
 it('should render a header with content on the left', () => {
   const startContent = <div id="start-id">start content</div>;
-  const flexFill = <div className="flex-fill" />;
   const flexEnd = <div className="flex-end">{startContent}</div>;
   const header = shallow(<Header startContent={startContent} />);
 
   // ensure flex-fill title container is after start content
   expect(header.find('.flex-header').props().children[0]).toEqual(flexEnd);
-  expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
   expect(header).toMatchSnapshot();
 });
 
 it('should render a header with content on the right', () => {
   const endContent = <div id="end-id">end content</div>;
-  const flexFill = <div className="flex-fill" />;
-  const flexEnd = <div className="flex-end">{endContent}</div>;
+  const flexFill = '';
+  const flexEnd = <div className="flex-end end-content">{endContent}</div>;
   const header = shallow(<Header endContent={endContent} />);
 
-  // ensure flex-fill title container is before end content
+  // ensure flex-fill title container is not rendered if no title is provided
   expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
   expect(header.find('.flex-header').props().children[3]).toEqual(flexEnd);
   expect(header).toMatchSnapshot();
@@ -74,7 +72,7 @@ it('should render a header with all content', () => {
     </div>
   );
   const flexEndStart = <div className="flex-end">{startContent}</div>;
-  const flexEndEnd = <div className="flex-end">{endContent}</div>;
+  const flexEndEnd = <div className="flex-end end-content">{endContent}</div>;
   const header = shallow((
     <Header
       startContent={startContent}
@@ -95,7 +93,7 @@ it('should render a header with start and end content and no title', () => {
   const startContent = <div id="start-id">start content</div>;
   const endContent = <div id="end-id">end content</div>;
   const flexEndStart = <div className="flex-end">{startContent}</div>;
-  const flexEndEnd = <div className="flex-end">{endContent}</div>;
+  const flexEndEnd = <div className="flex-end end-content">{endContent}</div>;
   const header = shallow((
     <Header
       startContent={startContent}

diff --git a/packages/terra-clinical-header/tests/jest/__snapshots__/Header.test.jsx.snap b/packages/terra-clinical-header/tests/jest/__snapshots__/Header.test.jsx.snap
@@ -3,11 +3,7 @@
 exports[`should render a default component 1`] = `
 <header
   className="flex-header"
->
-  <div
-    className="flex-fill"
-  />
-</header>
+/>
 `;
 
 exports[`should render a header with all content 1`] = `
@@ -37,7 +33,7 @@ exports[`should render a header with all content 1`] = `
     </div>
   </div>
   <div
-    className="flex-end"
+    className="flex-end end-content"
   >
     <div
       id="end-id"
@@ -61,9 +57,6 @@ exports[`should render a header with content on the left 1`] = `
       start content
     </div>
   </div>
-  <div
-    className="flex-fill"
-  />
 </header>
 `;
 
@@ -72,10 +65,7 @@ exports[`should render a header with content on the right 1`] = `
   className="flex-header"
 >
   <div
-    className="flex-fill"
-  />
-  <div
-    className="flex-end"
+    className="flex-end end-content"
   >
     <div
       id="end-id"
@@ -211,7 +201,7 @@ exports[`should render a header with start and end content and no title 1`] = `
     </div>
   </div>
   <div
-    className="flex-end"
+    className="flex-end end-content"
   >
     <div
       id="end-id"
@@ -267,7 +257,7 @@ exports[`should render a subheader with all content 1`] = `
     </div>
   </div>
   <div
-    className="flex-end"
+    className="flex-end end-content"
   >
     <div>
       end content