[terra-clinical-header] Added wrapContent to make wrapping of content…

… optional (#940)

packages/terra-clinical-header/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Added `wrapContent` prop to make content wrapping optional.
+
 ## 3.31.1 - (March 26, 2024)
 
 * Fixed

packages/terra-clinical-header/src/Header.jsx

@@ -67,6 +67,11 @@ const propTypes = {
    * Sets the header title to be a hyperlink.
    */
   onClick: PropTypes.func,
+
+  /**
+   * A Boolean indicating if start and end content should be wrapped.
+   */
+  wrapContent: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -75,6 +80,7 @@ const defaultProps = {
   endContent: null,
   isSubheader: false,
   text: '',
+  wrapContent: false,
 };
 
 const Header = ({
@@ -87,6 +93,7 @@ const Header = ({
   id,
   isSubheader,
   onClick,
+  wrapContent,
   ...customProps
 }) => {
   const theme = useContext(ThemeContext);
@@ -134,17 +141,18 @@ const Header = ({
   ]);
 
   const renderTitle = !(!titleContent && startContent && endContent);
+  const contentClassNames = wrapContent ? cx('flex-end-wrap') : cx('flex-end');
 
   return (
     <header {...customProps} className={headerClassNames}>
-      {startContent && <div className={cx('flex-end')}>{startContent}</div>}
+      {startContent && <div className={contentClassNames}>{startContent}</div>}
       {renderTitle && (
       <div className={cx('flex-fill')}>
         {titleElement}
       </div>
       )}
       {content}
-      {endContent && <div className={cx('flex-end')}>{endContent}</div>}
+      {endContent && <div className={contentClassNames}>{endContent}</div>}
     </header>
   );
 };

packages/terra-clinical-header/src/Header.module.scss

@@ -37,14 +37,20 @@
     width: 100%;
   }
 
-  .flex-end {
+  .flex-end-wrap {
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
     align-items: flex-start;
     align-content: flex-start;
   }
 
+  .flex-end{
+    display:flex;
+    flex: 0 0 auto;
+    position: relative;
+  }
+
   .title-container {
     position: relative;
     width: 100%;

packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss

@@ -23,4 +23,8 @@
     padding: 0;
     padding-right: 10px;
   }
+
+  .button {
+    margin: 5px;
+  }
 }

packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+
+import Header from 'terra-clinical-header';
+import Button from 'terra-button';
+import styles from './ClinicalHeaderCommontest.module.scss';
+
+const cx = classNames.bind(styles);
+
+const endContent = (
+  <div
+    id="headerTest--endContent"
+  >
+    <Button text="Update" className={cx('button')} />
+    <Button text="Renew" className={cx('button')} />
+    <Button text="Cancel" className={cx('button')} />
+    <Button text="Complete" className={cx('button')} />
+  </div>
+);
+
+export default () => (
+  <Header
+    id="Header"
+    text="Lorem ipsum dolor sit amet "
+    endContent={endContent}
+    wrapContent
+  />
+);

packages/terra-clinical-header/tests/wdio/header-spec.js

@@ -76,4 +76,10 @@ Terra.describeViewports('Clinical header', ['tiny', 'small', 'medium', 'large',
 
     Terra.validates.element('has hyperlink title');
   });
+
+  it('Wraps the end content', () => {
+    browser.url('/raw/tests/terra-clinical-header/clinical-header/header-wrap-content');
+
+    Terra.validates.element('wrapped content');
+  });
 });