terra-clinical-header - npm Package Compare versions

Comparing version 3.27.0 to 3.28.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+## 3.28.0 - (August 14, 2023)
+
+* Changed
+  * Deprecated `title` prop. This will be replaced by the`text` prop in the next major version.
+
+* Added
+  * Added `level` prop to allow users to render different heading levels.
+  * Added `id` prop which is to be paired with `aria-labelledby` for labelling page regions.
+  * Added `text` prop to allow users to spread title HTML Attribute as customProps. This will replace the `title` prop in the next major release.
+
 ## 3.27.0 - (August 2, 2023)
@@ -7,0 +17,0 @@

lib/Header.js

@@ -14,3 +14,3 @@ "use strict";
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
-var _excluded = ["children", "title", "startContent", "endContent", "isSubheader"];
+var _excluded = ["children", "title", "startContent", "endContent", "text", "level", "id", "isSubheader"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,2 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
   /**
+   * IDs should be used with 'aria-labelledby' to associate headings with the corresponding page area when needing to label regions.
+   * For an example, read [Accessibility Guide: Labeling Section Content](/components/terra-clinical-header/clinical-header/accessibility-guide#labeling-section-content) for additional information.
+   */
+  id: _propTypes.default.string,
+  /**
    * Child element to be displayed on the right end of the header.
@@ -35,4 +40,20 @@ * The element passed as children will be decorated with flex attributes.
   /**
-   * Text to be displayed as the title in the header bar
+   * Sets the heading level <h1>-<h6>. One of `1`, `2`, `3`, `4`, `5`, `6`. This helps screen readers to announce appropriate heading levels.
+   * Changing `level` will not visually change the style of the content.
+   *
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) It is required to be set in order for the header text to have proper accessibility.
+   * _Note: if the prop is not set level 1 by default. this would result in incorrect context of header in application._
+   *
+   * See the [Accessibility Guide](/components/terra-clinical-header/clinical-header/accessibility-guide) for additional information.
    */
+  level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Text to be displayed as the title in the header bar.
+   */
+  text: _propTypes.default.string,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * The `title` prop has been deprecated and will be removed in next major version release. Use the `text` prop instead.
+   */
   title: _propTypes.default.string,
@@ -53,3 +74,4 @@ /**
   endContent: null,
-  isSubheader: false
+  isSubheader: false,
+  text: ''
 };
@@ -61,16 +83,31 @@ var Header = function Header(_ref) {
     endContent = _ref.endContent,
+    text = _ref.text,
+    level = _ref.level,
+    id = _ref.id,
     isSubheader = _ref.isSubheader,
     customProps = _objectWithoutProperties(_ref, _excluded);
   var theme = (0, _react.useContext)(_terraThemeContext.default);
+  if (title) {
+    // TODO: remove on the next major version bump
+    // eslint-disable-next-line no-console
+    console.warn('The `title` prop has been renamed to `text`. Please update all references of `title` prop to `text`.');
+  }
+  if (!level) {
+    // TODO: remove on the next major version bump
+    // eslint-disable-next-line no-console
+    console.warn('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.');
+  }
   var titleElement;
-  if (title) {
+  if (title || text) {
+    var HeaderElement = level ? "h".concat(level) : 'h1';
     titleElement = /*#__PURE__*/_react.default.createElement("div", {
       className: cx('title-container')
-    }, /*#__PURE__*/_react.default.createElement("h1", {
+    }, /*#__PURE__*/_react.default.createElement(HeaderElement, {
+      id: id,
       className: cx('title')
-    }, title));
+    }, title || text));
   }
   var content = _react.default.Children.map(children, function (child) {
     return /*#__PURE__*/_react.default.cloneElement(child, {
-      className: (0, _classnames.default)([cx('flex-collapse'), children.props.className])
+      className: (0, _classnames.default)([cx('flex-collapse'), child.props.className])
     });
@@ -77,0 +114,0 @@ });

lib/terra-dev-site/doc/example/ContentHeader.js

@@ -11,14 +11,16 @@ "use strict";
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var TitleHeader = function TitleHeader() {
+var ContenteHeader = function ContenteHeader() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraClinicalHeader.default, {
     startContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
-      text: "Back"
+      text: "Button, Default Header"
     }),
-    title: "Patient Information",
+    text: "Default Header",
     endContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
-      text: "Prescription"
-    })
+      "aria-label": "Button, Default Header",
+      text: "Button"
+    }),
+    level: 3
   }));
 };
-var _default = TitleHeader;
+var _default = ContenteHeader;
 exports.default = _default;

lib/terra-dev-site/doc/example/HeaderLongText.js

@@ -12,3 +12,4 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraClinicalHeader.default, {
-    title: "This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a website's pages."
+    text: "This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a website's pages.",
+    level: 3
   }));
@@ -15,0 +16,0 @@ };

lib/terra-dev-site/doc/example/HeaderLongTextWithContent.js

@@ -8,16 +8,26 @@ "use strict";
 var _react = _interopRequireDefault(require("react"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
+var _terraDocs = require("@cerner/terra-docs");
 var _terraButton = _interopRequireDefault(require("terra-button"));
 var _terraClinicalHeader = _interopRequireDefault(require("terra-clinical-header"));
+var _ClinicalHeaderDocCommon = _interopRequireDefault(require("./ClinicalHeaderDocCommon.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var cx = _bind.default.bind(_ClinicalHeaderDocCommon.default);
 var LongTextWithContent = function LongTextWithContent() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraClinicalHeader.default, {
     startContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
+      "aria-label": "Back, Patient Information for Individual Diagnosed with a Chronic Disease",
       text: "Back"
     }),
-    title: "Patient Information for Individual Diagnosed with a Chronic Disease in the past or currently suffering: Comprehensive Medical History,Treatment Plan,and Prognosis Report",
+    text: "Patient Information for Individual Diagnosed with a Chronic Disease in the past or currently suffering: Comprehensive Medical History,Treatment Plan,and Prognosis Report",
     endContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
+      "aria-label": "print, Patient Information for Individual Diagnosed with a Chronic Disease",
       text: "print"
-    })
+    }),
+    level: 3
   }, /*#__PURE__*/_react.default.createElement(_terraButton.default, {
     text: "Medical History"
+  }), /*#__PURE__*/_react.default.createElement(_terraDocs.Placeholder, {
+    className: cx('placeholder-wrapper'),
+    title: "Collapsible Menu View"
   })));
@@ -24,0 +34,0 @@ };

lib/terra-dev-site/doc/example/Subheader.js

@@ -14,9 +14,11 @@ "use strict";
     startContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
+      "aria-label": "Consult, Dr. Carl",
       text: "Consult"
     }),
-    title: "Dr. Carl",
+    text: "Dr. Carl",
     endContent: /*#__PURE__*/_react.default.createElement(_terraButton.default, {
       text: "Information"
     }),
-    isSubheader: true
+    isSubheader: true,
+    level: 3
   }));
@@ -23,0 +25,0 @@ };

lib/terra-dev-site/doc/example/TitleHeader.js

@@ -12,3 +12,4 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_terraClinicalHeader.default, {
-    title: "Default Header"
+    text: "Default Header",
+    level: 3
   });
@@ -15,0 +16,0 @@ };

lib/terra-dev-site/test/clinical-header/LeftAndRightContentHeader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var startContent = /*#__PURE__*/_react.default.createElement("div", {
@@ -25,3 +25,3 @@ id: "headerTest--startContent",
     startContent: startContent,
-    title: "Header with content on the left and right",
+    text: "Header with content on the left and right",
     endContent: endContent
@@ -28,0 +28,0 @@ });

lib/terra-dev-site/test/clinical-header/LeftAndRightContentSubheader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var startContent = /*#__PURE__*/_react.default.createElement("div", {
@@ -25,3 +25,3 @@ id: "headerTest--startContent",
     startContent: startContent,
-    title: "Subheader with content on the left and right",
+    text: "Subheader with content on the left and right",
     endContent: endContent,
@@ -28,0 +28,0 @@ isSubheader: true

lib/terra-dev-site/test/clinical-header/LeftContentHeader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var content = /*#__PURE__*/_react.default.createElement("div", {
@@ -21,5 +21,6 @@ id: "headerTest--content",
     startContent: content,
-    title: "Header with content on the left"
+    text: "Header with content on the left",
+    level: 1
   });
 };
 exports.default = _default;

lib/terra-dev-site/test/clinical-header/LongTitleAndContentHeader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var startContent = /*#__PURE__*/_react.default.createElement("div", {
@@ -26,3 +26,3 @@ id: "headerTest--startContent",
     startContent: startContent,
-    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
     endContent: endContent
@@ -29,0 +29,0 @@ });

lib/terra-dev-site/test/clinical-header/LongTitleHeader.test.js

@@ -12,3 +12,3 @@ "use strict";
   id: "Header",
-  title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 });
@@ -15,0 +15,0 @@ var _default = function _default() {

lib/terra-dev-site/test/clinical-header/NoTitleRightContentHeader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var content = /*#__PURE__*/_react.default.createElement("div", {
@@ -20,5 +20,6 @@ id: "headerTest--content",
   return /*#__PURE__*/_react.default.createElement(_Header.default, {
-    endContent: content
+    endContent: content,
+    level: 1
   });
 };
 exports.default = _default;

lib/terra-dev-site/test/clinical-header/RightContentHeader.test.js

@@ -10,5 +10,5 @@ "use strict";
 var _Header = _interopRequireDefault(require("../../../Header"));
-var _ClinicalHeaderCommonTestModule = _interopRequireDefault(require("./ClinicalHeaderCommon.test.module.scss"));
+var _ClinicalHeaderCommontestModule = _interopRequireDefault(require("./ClinicalHeaderCommontest.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var cx = _bind.default.bind(_ClinicalHeaderCommonTestModule.default);
+var cx = _bind.default.bind(_ClinicalHeaderCommontestModule.default);
 var content = /*#__PURE__*/_react.default.createElement("div", {
@@ -20,6 +20,7 @@ id: "headerTest--content",
   return /*#__PURE__*/_react.default.createElement(_Header.default, {
-    title: "Header with content on the right",
-    endContent: content
+    text: "Header with content on the right",
+    endContent: content,
+    level: 1
   });
 };
 exports.default = _default;

lib/terra-dev-site/test/clinical-header/TitleHeader.test.js

@@ -12,3 +12,3 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_Header.default, {
-    title: "Title",
+    text: "Title",
     id: "Header"
@@ -15,0 +15,0 @@ });

package.json

 {
   "name": "terra-clinical-header",
   "main": "lib/Header.js",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "description": "A Header component that allows elements to be placed on the left and right ends of the header with a left aligned title in the center. ",
@@ -48,3 +48,3 @@ "repository": {
   },
-  "gitHead": "caec39a8132d310737b68ca75fdfc30d59c738e6"
+  "gitHead": "ad600593dcfcedede85096d52764c11aac4a3685"
 }

src/Header.jsx

@@ -13,2 +13,8 @@ import React, { useContext } from 'react';
   /**
+   * IDs should be used with 'aria-labelledby' to associate headings with the corresponding page area when needing to label regions.
+   * For an example, read [Accessibility Guide: Labeling Section Content](/components/terra-clinical-header/clinical-header/accessibility-guide#labeling-section-content) for additional information.
+   */
+  id: PropTypes.string,
+
+  /**
    * Child element to be displayed on the right end of the header.
@@ -25,4 +31,22 @@ * The element passed as children will be decorated with flex attributes.
   /**
-   * Text to be displayed as the title in the header bar
+   * Sets the heading level <h1>-<h6>. One of `1`, `2`, `3`, `4`, `5`, `6`. This helps screen readers to announce appropriate heading levels.
+   * Changing `level` will not visually change the style of the content.
+   *
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) It is required to be set in order for the header text to have proper accessibility.
+   * _Note: if the prop is not set level 1 by default. this would result in incorrect context of header in application._
+   *
+   * See the [Accessibility Guide](/components/terra-clinical-header/clinical-header/accessibility-guide) for additional information.
    */
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Text to be displayed as the title in the header bar.
+   */
+  text: PropTypes.string,
+
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * The `title` prop has been deprecated and will be removed in next major version release. Use the `text` prop instead.
+   */
   title: PropTypes.string,
@@ -47,16 +71,28 @@
   isSubheader: false,
+  text: '',
 };
 
 const Header = ({
-  children, title, startContent, endContent, isSubheader, ...customProps
+  children, title, startContent, endContent, text, level, id, isSubheader, ...customProps
 }) => {
   const theme = useContext(ThemeContext);
+  if (title) {
+    // TODO: remove on the next major version bump
+    // eslint-disable-next-line no-console
+    console.warn('The `title` prop has been renamed to `text`. Please update all references of `title` prop to `text`.');
+  }
+  if (!level) {
+    // TODO: remove on the next major version bump
+    // eslint-disable-next-line no-console
+    console.warn('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.');
+  }
 
   let titleElement;
-  if (title) {
+  if (title || text) {
+    const HeaderElement = (level) ? `h${level}` : 'h1';
     titleElement = (
       <div className={cx('title-container')}>
-        <h1 className={cx('title')}>
-          {title}
-        </h1>
+        <HeaderElement id={id} className={cx('title')}>
+          {title || text}
+        </HeaderElement>
       </div>
@@ -68,3 +104,3 @@ );
     React.cloneElement(child, {
-      className: classNames([cx('flex-collapse'), children.props.className]),
+      className: classNames([cx('flex-collapse'), child.props.className]),
     })
@@ -71,0 +107,0 @@ ));

src/terra-dev-site/doc/example/ContentHeader.jsx

@@ -5,8 +5,9 @@ import React from 'react';
 
-const TitleHeader = () => (
+const ContenteHeader = () => (
   <div>
     <Header
-      startContent={<Button text="Back" />}
-      title="Patient Information"
-      endContent={<Button text="Prescription" />}
+      startContent={<Button text="Button, Default Header" />}
+      text="Default Header"
+      endContent={<Button aria-label="Button, Default Header" text="Button" />}
+      level={3}
     />
@@ -16,2 +17,2 @@ </div>
 
-export default TitleHeader;
+export default ContenteHeader;

src/terra-dev-site/doc/example/HeaderLongText.jsx

@@ -7,3 +7,4 @@ import React from 'react';
     <Header
-      title="This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a website's pages."
+      text="This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a website's pages."
+      level={3}
     />
@@ -10,0 +11,0 @@ </div>

src/terra-dev-site/doc/example/HeaderLongTextWithContent.jsx

 import React from 'react';
+import classNamesBind from 'classnames/bind';
+import { Placeholder } from '@cerner/terra-docs';
 import Button from 'terra-button';
 import Header from 'terra-clinical-header';
+import styles from './ClinicalHeaderDocCommon.scss';
 
+const cx = classNamesBind.bind(styles);
+
 const LongTextWithContent = () => (
   <div>
     <Header
-      startContent={<Button text="Back" />}
-      title="Patient Information for Individual Diagnosed with a Chronic Disease in the past or currently suffering: Comprehensive Medical History,Treatment Plan,and Prognosis Report"
-      endContent={<Button text="print" />}
+      startContent={<Button aria-label="Back, Patient Information for Individual Diagnosed with a Chronic Disease" text="Back" />}
+      text="Patient Information for Individual Diagnosed with a Chronic Disease in the past or currently suffering: Comprehensive Medical History,Treatment Plan,and Prognosis Report"
+      endContent={<Button aria-label="print, Patient Information for Individual Diagnosed with a Chronic Disease" text="print" />}
+      level={3}
     >
       <Button text="Medical History" />
+      <Placeholder className={cx('placeholder-wrapper')} title="Collapsible Menu View" />
     </Header>
@@ -14,0 +21,0 @@ </div>

src/terra-dev-site/doc/example/Subheader.jsx

@@ -8,6 +8,7 @@ import React from 'react';
     <Header
-      startContent={<Button text="Consult" />}
-      title="Dr. Carl"
+      startContent={<Button aria-label="Consult, Dr. Carl" text="Consult" />}
+      text="Dr. Carl"
       endContent={<Button text="Information" />}
       isSubheader
+      level={3}
     />
@@ -14,0 +15,0 @@ </div>

src/terra-dev-site/doc/example/TitleHeader.jsx

@@ -5,5 +5,5 @@ import React from 'react';
 const TitleHeader = () => (
-  <Header title="Default Header" />
+  <Header text="Default Header" level={3} />
 );
 
 export default TitleHeader;

src/terra-dev-site/test/clinical-header/LeftAndRightContentHeader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -27,5 +27,5 @@ const cx = classNames.bind(styles);
     startContent={startContent}
-    title="Header with content on the left and right"
+    text="Header with content on the left and right"
     endContent={endContent}
   />
 );

src/terra-dev-site/test/clinical-header/LeftAndRightContentSubheader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -27,3 +27,3 @@ const cx = classNames.bind(styles);
     startContent={startContent}
-    title="Subheader with content on the left and right"
+    text="Subheader with content on the left and right"
     endContent={endContent}
@@ -30,0 +30,0 @@ isSubheader

src/terra-dev-site/test/clinical-header/LeftContentHeader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -20,4 +20,5 @@ const cx = classNames.bind(styles);
     startContent={content}
-    title="Header with content on the left"
+    text="Header with content on the left"
+    level={1}
   />
 );

src/terra-dev-site/test/clinical-header/LongTitleAndContentHeader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -27,5 +27,5 @@ const cx = classNames.bind(styles);
     startContent={startContent}
-    title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     endContent={endContent}
   />
 );

src/terra-dev-site/test/clinical-header/LongTitleHeader.test.jsx

@@ -5,4 +5,4 @@ import React from 'react';
 
-const LongTitleHeader = <Header id="Header" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit." />;
+const LongTitleHeader = <Header id="Header" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien. Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat. Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida. Nulla accumsan non nisl sed elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit." />;
 
 export default () => LongTitleHeader;

src/terra-dev-site/test/clinical-header/NoTitleRightContentHeader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -20,3 +20,4 @@ const cx = classNames.bind(styles);
     endContent={content}
+    level={1}
   />
 );

src/terra-dev-site/test/clinical-header/RightContentHeader.test.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 import Header from '../../../Header';
-import styles from './ClinicalHeaderCommon.test.module.scss';
+import styles from './ClinicalHeaderCommontest.module.scss';
 
@@ -19,5 +19,6 @@ const cx = classNames.bind(styles);
   <Header
-    title="Header with content on the right"
+    text="Header with content on the right"
     endContent={content}
+    level={1}
   />
 );

src/terra-dev-site/test/clinical-header/TitleHeader.test.jsx

@@ -5,2 +5,2 @@ import React from 'react';
 
-export default () => <Header title="Title" id="Header" />;
+export default () => <Header text="Title" id="Header" />;

tests/jest/Header.test.jsx

 import React from 'react';
 import Header from '../../src/Header';
 
+afterEach(() => {
+  // restore the spy created with spyOn
+  jest.restoreAllMocks();
+});
+
 it('should render a default component', () => {
@@ -9,4 +14,4 @@ const header = render(<Header />);
 
-it('should render a header with title only', () => {
-  const header = render(<Header title="title" />);
+it('should render a header with title and heading level', () => {
+  const header = render(<Header id="test-id" level={1} text="title" />);
   expect(header).toMatchSnapshot();
@@ -16,3 +21,3 @@ });
 it('should render a header with content on the left', () => {
-  const header = render(<Header startContent={<div>start content</div>} />);
+  const header = render(<Header level={1} startContent={<div>start content</div>} />);
   expect(header).toMatchSnapshot();
@@ -22,3 +27,3 @@ });
 it('should render a header with content on the right', () => {
-  const header = render(<Header endContent={<div>end content</div>} />);
+  const header = render(<Header level={1} endContent={<div>end content</div>} />);
   expect(header).toMatchSnapshot();
@@ -31,4 +36,5 @@ });
       startContent={<div>start content</div>}
-      title="Title"
+      text="Title"
       endContent={<div>end content</div>}
+      level={1}
     />
@@ -39,4 +45,7 @@ ));
 
-it('should render a subheader with title only', () => {
-  const subheader = render(<Header title="title" isSubheader />);
+it('should render a subheader with title and heading level', () => {
+  const consoleSpy = jest.spyOn(global.console, 'warn');
+  const subheader = render(<Header level={1} title="title" isSubheader />);
+  const titleWarningMessage = 'The `title` prop has been renamed to `text`. Please update all references of `title` prop to `text`.';
+  expect(consoleSpy).toHaveBeenCalledWith(titleWarningMessage);
   expect(subheader).toMatchSnapshot();
@@ -49,5 +58,6 @@ });
       startContent={<div>start content</div>}
-      title="Title"
+      text="Title"
       endContent={<div>end content</div>}
       isSubheader
+      level={1}
     />
@@ -57,1 +67,9 @@ ));
 });
+
+it('should render a header with default heading level when level not set', () => {
+  const consoleSpy = jest.spyOn(global.console, 'warn');
+  const header = render(<Header text="This title should render with a default level" />);
+  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(consoleSpy).toHaveBeenCalledWith(levelWarningMessage);
+  expect(header).toMatchSnapshot();
+});

tests/wdio/header-spec.js

@@ -50,3 +50,3 @@ Terra.describeViewports('Clinical header', ['tiny', 'small', 'medium', 'large', 'huge', 'enormous'], () => {
 
-  it('Header with no title and content on the right', () => {
+  it('Uses a header with no title and content on the right', () => {
     browser.url('/raw/tests/terra-clinical-header/clinical-header/no-title-right-content-header');
@@ -56,2 +56,20 @@
   });
+
+  it('Uses a header to label different regions', () => {
+    browser.url('/raw/tests/terra-clinical-header/clinical-header/labeling-regions');
+
+    Terra.validates.element('labeling regions');
+  });
+
+  it('Uses a header with long title and children', () => {
+    browser.url('/raw/tests/terra-clinical-header/clinical-header/long-title-and-children-header');
+
+    Terra.validates.element('long title with children');
+  });
+
+  it('Uses a header with no level and no title', () => {
+    browser.url('/raw/tests/terra-clinical-header/clinical-header/no-level-header');
+
+    Terra.validates.element('no level and no title');
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

103347

increased by60.75%

Number of package files

61

increased by19.61%

Lines of code

975

increased by34.11%

No dependency changes