diff --git a/README.md b/README.md
index 28369ccc1..83cac0b4b 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ Please review [Terra's Internationalization documentation](https://engineering.c
Contributing
-Please read through our [contributing guidelines](CONTRIBUTING.md). Included are directions for issue reporting and pull requests.
+Please read through our [contributing guidelines](./CONTRIBUTING.md). Included are directions for issue reporting and pull requests.
Local Development
diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md
index 52571a719..d5b99fc74 100644
--- a/packages/terra-clinical-header/CHANGELOG.md
+++ b/packages/terra-clinical-header/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Added
+ * Added `onTextClick` and support for hyperlink button header titles.
+
## 3.28.0 - (August 14, 2023)
* Changed
diff --git a/packages/terra-clinical-header/package.json b/packages/terra-clinical-header/package.json
index d6b2975b0..e0dc6e787 100644
--- a/packages/terra-clinical-header/package.json
+++ b/packages/terra-clinical-header/package.json
@@ -30,6 +30,8 @@
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
"terra-button": "^3.0.0",
+ "terra-enzyme-intl": "^3.4.0",
+ "terra-hyperlink": "^2.63.0",
"terra-theme-context": "^1.0.0"
},
"scripts": {
diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx
index 4155bb93a..7e79f117c 100644
--- a/packages/terra-clinical-header/src/Header.jsx
+++ b/packages/terra-clinical-header/src/Header.jsx
@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import classNamesBind from 'classnames/bind';
+
+import Hyperlink from 'terra-hyperlink';
import ThemeContext from 'terra-theme-context';
import styles from './Header.module.scss';
@@ -59,6 +61,12 @@ const propTypes = {
* A Boolean indicating if element is a subheader.
*/
isSubheader: PropTypes.bool,
+
+ /**
+ * Callback function triggered via hyperlink button title.
+ * Sets the header title to be a hyperlink.
+ */
+ onClick: PropTypes.func,
};
const defaultProps = {
@@ -70,7 +78,16 @@ const defaultProps = {
};
const Header = ({
- children, title, startContent, endContent, text, level, id, isSubheader, ...customProps
+ children,
+ title,
+ startContent,
+ endContent,
+ text,
+ level,
+ id,
+ isSubheader,
+ onClick,
+ ...customProps
}) => {
const theme = useContext(ThemeContext);
if (title) {
@@ -85,12 +102,17 @@ const Header = ({
}
let titleElement;
- if (title || text) {
- const HeaderElement = (level) ? `h${level}` : 'h1';
+ const titleContent = title || text;
+ if (titleContent) {
+ const HeaderElement = level ? `h${level}` : 'h1';
titleElement = (
- {title || text}
+ {onClick ? (
+
+ ) : (
+ titleContent
+ )}
);
diff --git a/packages/terra-clinical-header/src/Header.module.scss b/packages/terra-clinical-header/src/Header.module.scss
index 1707e5ea2..15ca5274e 100644
--- a/packages/terra-clinical-header/src/Header.module.scss
+++ b/packages/terra-clinical-header/src/Header.module.scss
@@ -59,14 +59,14 @@
width: 100%;
word-wrap: break-word; /* For IE 10 and IE 11 */
}
-
+
/* stylelint-disable selector-max-compound-selectors */
.flex-end + .flex-fill {
.title {
padding-left: var(--terra-clinical-header-end-content-plus-title-padding-left, 0.35714rem);
}
}
-
+
.flex-fill + .flex-end {
.title {
padding-right: var(--terra-clinical-header-title-plus-end-content-padding-right, 0.35714rem);
diff --git a/packages/terra-clinical-header/src/terra-dev-site/doc/clinical-header/clinicalHeader.1.doc.mdx b/packages/terra-clinical-header/src/terra-dev-site/doc/clinical-header/clinicalHeader.1.doc.mdx
index e21e9819e..c9eabbe47 100644
--- a/packages/terra-clinical-header/src/terra-dev-site/doc/clinical-header/clinicalHeader.1.doc.mdx
+++ b/packages/terra-clinical-header/src/terra-dev-site/doc/clinical-header/clinicalHeader.1.doc.mdx
@@ -7,6 +7,7 @@ import ContentHeader from '../example/ContentHeader?dev-site-example';
import HeaderLongText from '../example/HeaderLongText?dev-site-example';
import HeaderLongTextWithContent from '../example/HeaderLongTextWithContent?dev-site-example';
import Subheader from '../example/Subheader?dev-site-example';
+import HyperlinkTitleHeader from '../example/HyperlinkTitleHeader?dev-site-example';
@@ -19,7 +20,7 @@ A Header component that allows elements to be placed on the left and right ends
- Install with [npmjs](https://www.npmjs.com):
- `npm install terra-clinical-header`
-## Usage
+## Usage
``` jsx
import Header from 'terra-clinical-header';
@@ -30,12 +31,13 @@ import Header from 'terra-clinical-header';
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
-## Example
+## Example
+
-## Header Props Table
+## Header Props Table
diff --git a/packages/terra-clinical-header/src/terra-dev-site/doc/example/HyperlinkTitleHeader.jsx b/packages/terra-clinical-header/src/terra-dev-site/doc/example/HyperlinkTitleHeader.jsx
new file mode 100644
index 000000000..57d4f8ed9
--- /dev/null
+++ b/packages/terra-clinical-header/src/terra-dev-site/doc/example/HyperlinkTitleHeader.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import Header from 'terra-clinical-header';
+
+const HyperlinkTitleHeader = () => (
+ // eslint-disable-next-line no-console
+ { console.log('Hyperlink title clicked'); }} text="John Smith" level={3} />
+);
+
+export default HyperlinkTitleHeader;
diff --git a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HyperlinkTitleHeader.test.jsx b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HyperlinkTitleHeader.test.jsx
new file mode 100644
index 000000000..d5c5e6a41
--- /dev/null
+++ b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HyperlinkTitleHeader.test.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import Header from '../../../Header';
+
+const HyperlinkTitleHeader = () => (
+ {}} text="John Smith" />
+);
+
+export default HyperlinkTitleHeader;
diff --git a/packages/terra-clinical-header/tests/jest/Header.test.jsx b/packages/terra-clinical-header/tests/jest/Header.test.jsx
index b448cdad4..238fa17bf 100644
--- a/packages/terra-clinical-header/tests/jest/Header.test.jsx
+++ b/packages/terra-clinical-header/tests/jest/Header.test.jsx
@@ -1,59 +1,114 @@
import React from 'react';
+import { shallowWithIntl } from 'terra-enzyme-intl';
+
import Header from '../../src/Header';
+const mockFunc = jest.fn();
afterEach(() => {
// restore the spy created with spyOn
jest.restoreAllMocks();
});
it('should render a default component', () => {
- const header = render();
+ const header = shallow();
+ expect(header).toMatchSnapshot();
+});
+
+it('should render a header with title', () => {
+ const header = shallow();
+
+ const headerTitle = header.find('h1');
+ expect(headerTitle.text()).toEqual('title');
expect(header).toMatchSnapshot();
});
-it('should render a header with title and heading level', () => {
- const header = render();
+it('should render a header with id', () => {
+ const header = shallow();
+
+ const headerTitle = header.find('h1');
+ expect(headerTitle.prop('id')).toEqual('test-id');
+ expect(headerTitle.text()).toEqual('title');
+ expect(header).toMatchSnapshot();
+});
+
+it('should render a header with heading level', () => {
+ const header = shallow();
+
+ const headerTitle = header.find('h2');
+ expect(headerTitle.text()).toEqual('title');
expect(header).toMatchSnapshot();
});
it('should render a header with content on the left', () => {
- const header = render(start content} />);
+ 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 header = render(end content} />);
+ const endContent = end content
;
+ const flexFill = ;
+ const flexEnd = {endContent}
;
+ const header = shallow();
+
+ // ensure flex-fill title container is before end content
+ expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
+ expect(header.find('.flex-header').props().children[3]).toEqual(flexEnd);
expect(header).toMatchSnapshot();
});
it('should render a header with all content', () => {
- const header = render((
+ const startContent = start content
;
+ const endContent = end content
;
+ const flexFill = (
+
+ );
+ const flexEndStart = {startContent}
;
+ const flexEndEnd = {endContent}
;
+ const header = shallow((
start content}
+ startContent={startContent}
text="Title"
- endContent={end content
}
- level={1}
+ endContent={endContent}
/>
));
+
+ const headerTitle = header.find('h1');
+ expect(headerTitle.text()).toEqual('Title');
+ expect(header.find('.flex-header').props().children[0]).toEqual(flexEndStart);
+ expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
+ 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 = render();
+ const subheader = shallow();
const titleWarningMessage = 'The `title` prop has been renamed to `text`. Please update all references of `title` prop to `text`.';
+
+ expect(subheader.prop('className')).toEqual('flex-header subheader');
+ expect(subheader.find('h1').text()).toEqual('title');
expect(consoleSpy).toHaveBeenCalledWith(titleWarningMessage);
expect(subheader).toMatchSnapshot();
});
it('should render a subheader with all content', () => {
- const subheader = render((
+ const subheader = shallow((
start content}
text="Title"
endContent={end content
}
isSubheader
- level={1}
/>
));
expect(subheader).toMatchSnapshot();
@@ -61,8 +116,22 @@ it('should render a subheader with all content', () => {
it('should render a header with default heading level when level not set', () => {
const consoleSpy = jest.spyOn(global.console, 'warn');
- const header = render();
+ const title = 'This title should render with a default level';
+ const header = shallow();
const levelWarningMessage = 'Default heading level may not appropriate has it would fail to convey context of heading in a site / application where it is used. Heading level should be set explicitly depending on the position of header in site / application to allow screen readers to identify headers consistently.';
+
+ expect(header.find('h1').text()).toEqual(title);
expect(consoleSpy).toHaveBeenCalledWith(levelWarningMessage);
expect(header).toMatchSnapshot();
});
+
+it('should render a header with hyperlink title', () => {
+ const header = shallowWithIntl();
+
+ expect(header.find('h1').length).toEqual(1);
+ const hyperlinkButton = header.find('InjectIntl(Hyperlink)');
+ expect(hyperlinkButton.prop('onClick')).toEqual(mockFunc);
+ expect(hyperlinkButton.prop('text')).toEqual('Title');
+ expect(header).toMatchSnapshot();
+});
+
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 585c66b88..8fd493dd9 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
@@ -2,42 +2,46 @@
exports[`should render a default component 1`] = `
`;
exports[`should render a header with all content 1`] = `