[terra-clinical-header] Wrapped start and end content (#936)

cerner · Mar 21, 2024 · ff34cda · ff34cda
1 parent 2bbd051
commit ff34cda
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 2 deletions.
diff --git 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 of 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
@@ -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
@@ -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
@@ -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
@@ -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"