diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md index ae263b7db..9b7aa7ca5 100644 --- 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 index 488b97e47..76c5ad286 100644 --- 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 (
{startContent &&
{startContent}
} - {renderTitle && ( + {titleContent && (
{titleElement}
)} {content} - {endContent &&
{endContent}
} + {endContent &&
{endContent}
}
); }; diff --git a/packages/terra-clinical-header/src/Header.module.scss b/packages/terra-clinical-header/src/Header.module.scss index 9eff969bb..409d4075d 100644 --- 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 index 645f92377..0a08523a3 100644 --- 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 =
start content
; - const flexFill =
; const flexEnd =
{startContent}
; const header = shallow(
); // 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 =
end content
; - const flexFill =
; - const flexEnd =
{endContent}
; + const flexFill = ''; + const flexEnd =
{endContent}
; const header = shallow(
); - // 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', () => {
); const flexEndStart =
{startContent}
; - const flexEndEnd =
{endContent}
; + const flexEndEnd =
{endContent}
; const header = shallow((
{ const startContent =
start content
; const endContent =
end content
; const flexEndStart =
{startContent}
; - const flexEndEnd =
{endContent}
; + const flexEndEnd =
{endContent}
; const header = shallow((
-
-
+/> `; exports[`should render a header with all content 1`] = ` @@ -37,7 +33,7 @@ exports[`should render a header with all content 1`] = `
-
`; @@ -72,10 +65,7 @@ exports[`should render a header with content on the right 1`] = ` className="flex-header" >
-
end content