From fcc2212dc9f2785afe3ad174dc8b4c37866045de Mon Sep 17 00:00:00 2001
From: saket2403 <saket.bajaj1998@gmail.com>
Date: Thu, 21 Mar 2024 15:11:44 +0530
Subject: [PATCH 1/2] Wrapped content

---
 packages/terra-clinical-header/CHANGELOG.md   |  3 +++
 packages/terra-clinical-header/src/Header.jsx |  4 +++
 .../src/Header.module.scss                    |  6 +++--
 .../tests/jest/Header.test.jsx                | 17 +++++++++++++
 .../jest/__snapshots__/Header.test.jsx.snap   | 25 +++++++++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md
index cfe491ca7..ce2d3b811 100644
--- a/packages/terra-clinical-header/CHANGELOG.md
+++ b/packages/terra-clinical-header/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Changed styles to allow wrapping o start and end content.
+
 ## 3.30.0 - (March 1, 2024)
 
 * Changed
diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx
index 7e79f117c..488e73334 100644
--- a/packages/terra-clinical-header/src/Header.jsx
+++ b/packages/terra-clinical-header/src/Header.jsx
@@ -133,12 +133,16 @@ const Header = ({
     customProps.className,
   ]);
 
+  const renderTitle = !(!titleContent && startContent && endContent);
+
   return (
     <header {...customProps} className={headerClassNames}>
       {startContent && <div className={cx('flex-end')}>{startContent}</div>}
+      {renderTitle && (
       <div className={cx('flex-fill')}>
         {titleElement}
       </div>
+      )}
       {content}
       {endContent && <div className={cx('flex-end')}>{endContent}</div>}
     </header>
diff --git a/packages/terra-clinical-header/src/Header.module.scss b/packages/terra-clinical-header/src/Header.module.scss
index 15ca5274e..d6a4d54ea 100644
--- a/packages/terra-clinical-header/src/Header.module.scss
+++ b/packages/terra-clinical-header/src/Header.module.scss
@@ -39,8 +39,10 @@
 
   .flex-end {
     display: flex;
-    flex: 0 0 auto;
-    position: relative;
+    flex-flow: column wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
   }
 
   .title-container {
diff --git a/packages/terra-clinical-header/tests/jest/Header.test.jsx b/packages/terra-clinical-header/tests/jest/Header.test.jsx
index 238fa17bf..645f92377 100644
--- a/packages/terra-clinical-header/tests/jest/Header.test.jsx
+++ b/packages/terra-clinical-header/tests/jest/Header.test.jsx
@@ -91,6 +91,23 @@ it('should render a header with all content', () => {
   expect(header).toMatchSnapshot();
 });
 
+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 header = shallow((
+    <Header
+      startContent={startContent}
+      endContent={endContent}
+    />
+  ));
+
+  expect(header.find('.flex-header').props().children[0]).toEqual(flexEndStart);
+  expect(header.find('.flex-header').props().children[3]).toEqual(flexEndEnd);
+  expect(header).toMatchSnapshot();
+});
+
 it('should render a subheader with title and heading level', () => {
   const consoleSpy = jest.spyOn(global.console, 'warn');
   const subheader = shallow(<Header title="title" isSubheader />);
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
index 8fd493dd9..dabc8954f 100644
--- a/packages/terra-clinical-header/tests/jest/__snapshots__/Header.test.jsx.snap
+++ b/packages/terra-clinical-header/tests/jest/__snapshots__/Header.test.jsx.snap
@@ -197,6 +197,31 @@ exports[`should render a header with id 1`] = `
 </header>
 `;
 
+exports[`should render a header with start and end content and no title 1`] = `
+<header
+  className="flex-header"
+>
+  <div
+    className="flex-end"
+  >
+    <div
+      id="start-id"
+    >
+      start content
+    </div>
+  </div>
+  <div
+    className="flex-end"
+  >
+    <div
+      id="end-id"
+    >
+      end content
+    </div>
+  </div>
+</header>
+`;
+
 exports[`should render a header with title 1`] = `
 <header
   className="flex-header"

From 49429117b3d6a7150c0368af377da533ed3ce0f2 Mon Sep 17 00:00:00 2001
From: Saket Bajaj <42207428+saket2403@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:47:29 +0530
Subject: [PATCH 2/2] Update CHANGELOG.md

---
 packages/terra-clinical-header/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md
index ce2d3b811..9d0929bf4 100644
--- a/packages/terra-clinical-header/CHANGELOG.md
+++ b/packages/terra-clinical-header/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 * Changed
-  * Changed styles to allow wrapping o start and end content.
+  * Changed styles to allow wrapping of start and end content.
 
 ## 3.30.0 - (March 1, 2024)