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 = ( +
+
+

Title

+
+
+ ); + 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`] = `
-
+
start content

Title

-
+
end content
@@ -46,32 +50,36 @@ exports[`should render a header with all content 1`] = ` exports[`should render a header with content on the left 1`] = `
-
+
start content
`; exports[`should render a header with content on the right 1`] = `
-
+
end content
@@ -80,16 +88,16 @@ exports[`should render a header with content on the right 1`] = ` exports[`should render a header with default heading level when level not set 1`] = `

This title should render with a default level

@@ -98,18 +106,88 @@ exports[`should render a header with default heading level when level not set 1`
`; -exports[`should render a header with title and heading level 1`] = ` +exports[`should render a header with heading level 1`] = ` +
+
+
+

+ title +

+
+
+
+`; + +exports[`should render a header with hyperlink title 1`] = ` +
+
+
+

+ +

+
+
+
+`; + +exports[`should render a header with id 1`] = `

title @@ -119,32 +197,52 @@ exports[`should render a header with title and heading level 1`] = `

`; +exports[`should render a header with title 1`] = ` +
+
+
+

+ title +

+
+
+
+`; + exports[`should render a subheader with all content 1`] = `
start content

Title

end content @@ -155,16 +253,16 @@ exports[`should render a subheader with all content 1`] = ` exports[`should render a subheader with title and heading level 1`] = `

title

diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..56b8956f4 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..0ff15eeaa Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..830d84e74 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..b6cc312d9 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..b3aff6495 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..cc60fa4d8 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..61897acb6 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..496b18e32 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..dfc280c35 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..3ac02bdca Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..daef9a35a Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..76a31c51d Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..0466a818e Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..6e618edf7 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..6ae49d54b Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..a3d991691 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..f7a8eedd4 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png new file mode 100644 index 000000000..ead71df69 Binary files /dev/null and b/packages/terra-clinical-header/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/header-spec/has_hyperlink_title.png differ diff --git a/packages/terra-clinical-header/tests/wdio/header-spec.js b/packages/terra-clinical-header/tests/wdio/header-spec.js index 105242560..e9785f788 100644 --- a/packages/terra-clinical-header/tests/wdio/header-spec.js +++ b/packages/terra-clinical-header/tests/wdio/header-spec.js @@ -70,4 +70,10 @@ Terra.describeViewports('Clinical header', ['tiny', 'small', 'medium', 'large', Terra.validates.element('no level and no title'); }); + + it('header with hyperlink title', () => { + browser.url('/raw/tests/terra-clinical-header/clinical-header/hyperlink-title-header'); + + Terra.validates.element('has hyperlink title'); + }); });