From 7fb65307963e4054555e716940348601cf957314 Mon Sep 17 00:00:00 2001 From: saket2403 Date: Mon, 1 Apr 2024 12:08:14 +0530 Subject: [PATCH 1/2] Added wrapContent --- packages/terra-clinical-header/CHANGELOG.md | 3 ++ packages/terra-clinical-header/src/Header.jsx | 12 ++++++-- .../src/Header.module.scss | 8 ++++- .../ClinicalHeaderCommontest.module.scss | 4 +++ .../HeaderWrapContent.test.jsx | 28 ++++++++++++++++++ .../header-spec/wrapped_content.png | Bin 0 -> 9110 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8998 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8700 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8568 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8380 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8204 bytes .../header-spec/wrapped_content.png | Bin 0 -> 10238 bytes .../header-spec/wrapped_content.png | Bin 0 -> 10117 bytes .../header-spec/wrapped_content.png | Bin 0 -> 10104 bytes .../header-spec/wrapped_content.png | Bin 0 -> 9814 bytes .../header-spec/wrapped_content.png | Bin 0 -> 9669 bytes .../header-spec/wrapped_content.png | Bin 0 -> 9497 bytes .../header-spec/wrapped_content.png | Bin 0 -> 9307 bytes .../header-spec/wrapped_content.png | Bin 0 -> 9244 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8938 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8816 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8476 bytes .../header-spec/wrapped_content.png | Bin 0 -> 8451 bytes .../tests/wdio/header-spec.js | 6 ++++ 24 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/header-spec/wrapped_content.png create mode 100644 packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/header-spec/wrapped_content.png diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md index f7558764e..844d1b070 100644 --- a/packages/terra-clinical-header/CHANGELOG.md +++ b/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 diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx index 488e73334..488b97e47 100644 --- a/packages/terra-clinical-header/src/Header.jsx +++ b/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 (
- {startContent &&
{startContent}
} + {startContent &&
{startContent}
} {renderTitle && (
{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 541445a69..9eff969bb 100644 --- a/packages/terra-clinical-header/src/Header.module.scss +++ b/packages/terra-clinical-header/src/Header.module.scss @@ -37,7 +37,7 @@ width: 100%; } - .flex-end { + .flex-end-wrap { display: flex; flex-flow: row wrap; justify-content: flex-start; @@ -45,6 +45,12 @@ align-content: flex-start; } + .flex-end{ + display:flex; + flex: 0 0 auto; + position: relative; + } + .title-container { position: relative; width: 100%; diff --git a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss index 1915ece0c..9cf40a8a0 100644 --- a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss +++ b/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; + } } diff --git a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx new file mode 100644 index 000000000..18ac513e5 --- /dev/null +++ b/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 = ( +
+
+); + +export default () => ( +