terra-clinical-header - npm Package Compare versions

Comparing version 3.15.0 to 3.16.0

CHANGELOG.md

@@ -7,4 +7,13 @@ ChangeLog
 
+3.16.0 - (April 14, 2020)
+----------
+### Added
+* Added orion-fusion-theme style values
+
+### Changed
+* Update wdio test configuration to use root wdio config
+* Updated default theme styles to match terra-action-header
+
 3.15.0 - (March 31, 2020)
-------------------
+----------
 ### Added
@@ -29,3 +38,3 @@ * Added wdio screenshots for clinical-lowlight-theme
 3.11.0 - (January 22, 2020)
-------------------
+----------
 ### Added
@@ -35,3 +44,3 @@ * Added reference wdio screenshots for "orion-fusion-theme".
 3.10.0 - (September 26, 2019)
-------------------
+----------
 ### Changed
@@ -197,3 +206,3 @@ * Minor dependency updates
 1.7.0 - (November 29, 2017)
------------------
+----------
 ### Added
@@ -203,3 +212,3 @@ * Collapsible Content Section to enable use of CollapsibleMenuView
 1.6.0 - (November 15, 2017)
------------------
+----------
 ### Changed
@@ -209,3 +218,3 @@ * Update flex-end styling
 1.5.0 - (September 26, 2017)
------------------
+----------
 ### Changed
@@ -216,3 +225,3 @@ * Remove stylelint-disable selector-class-pattern
 1.4.0 - (September 1, 2017)
------------------
+----------
 ### Changed
@@ -223,3 +232,3 @@ * Change dependency on terra-base to v2.0.0
 1.3.0 - (August 22, 2017)
------------------
+----------
 ### Fixed
@@ -232,3 +241,3 @@ * End aligned items with no title.
 1.2.0 - (August 16, 2017)
------------------
+----------
 ### Fixed
@@ -238,7 +247,7 @@ * Text Truncation in IE10 and IE11.
 1.1.1 - (July 27, 2017)
------------------
+----------
 * Updated spacing around react-docgen comments
 
 1.1.0 - (July 18, 2017)
------------------
+----------
 ### Changed
@@ -252,3 +261,3 @@ * Converted component to use CSS modules
 1.0.0 - (June 28, 2017)
------------------
+----------
 Initial stable release

lib/Header.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,8 +10,12 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
+
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
@@ -19,2 +25,6 @@
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -71,10 +81,3 @@
 
-  var startElement;
-
-  if (startContent) {
-    startElement = /*#__PURE__*/_react.default.createElement("div", {
-      className: cx('flex-end')
-    }, startContent);
-  }
-
+  var theme = (0, _react.useContext)(_terraThemeContext.default);
   var titleElement;
@@ -90,25 +93,20 @@
 
-  var endElement;
-
-  if (endContent) {
-    endElement = /*#__PURE__*/_react.default.createElement("div", {
-      className: cx('flex-end')
-    }, endContent);
-  }
-
-  var childElement;
-
-  if (children) {
-    var childClassNames = cx(['flex-collapse', children.props.className]);
-    childElement = _react.default.cloneElement(children, {
-      className: childClassNames
+  var content = _react.default.Children.map(children, function (child) {
+    return _react.default.cloneElement(child, {
+      className: (0, _classnames.default)([cx('flex-collapse'), children.props.className])
     });
-  }
+  });
 
-  var headerClass = isSubheader ? 'flex-subheader' : 'flex-header';
+  var headerClassNames = (0, _classnames.default)([cx(['flex-header', {
+    subheader: isSubheader
+  }, theme.className]), customProps.className]);
   return /*#__PURE__*/_react.default.createElement("header", _extends({}, customProps, {
-    className: cx(headerClass, customProps.className)
-  }), startElement, /*#__PURE__*/_react.default.createElement("div", {
+    className: headerClassNames
+  }), startContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('flex-end')
+  }, startContent), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('flex-fill')
-  }, titleElement), childElement, endElement);
+  }, titleElement), content, endContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('flex-end')
+  }, endContent));
 };
@@ -115,0 +113,0 @@

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

@@ -34,3 +34,3 @@ "use strict";
     startContent: startContent,
-    title: "LongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitle",
+    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.",
     endContent: endContent
@@ -37,0 +37,0 @@ });

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

@@ -16,3 +16,3 @@ "use strict";
   id: "Header",
-  title: "LongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitle"
+  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."
 });
@@ -19,0 +19,0 @@

package.json

 {
   "name": "terra-clinical-header",
   "main": "lib/Header.js",
-  "version": "3.15.0",
+  "version": "3.16.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. ",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cerner/terra-clinical.git"
+    "url": "git+https://github.com/cerner/terra-clinical.git",
+    "directory": "packages/terra-clinical-header"
   },
@@ -31,3 +32,4 @@ "keywords": [
     "prop-types": "^15.5.8",
-    "terra-button": "^3.0.0"
+    "terra-button": "^3.0.0",
+    "terra-theme-context": "^1.0.0"
   },
@@ -40,10 +42,10 @@ "scripts": {
     "precompile": "rm -rf lib",
-    "test": "npm run jest && npm run wdio",
+    "test": "npm run lint && npm run jest && npm run wdio",
     "jest": "jest --config ../../jestconfig.js",
-    "wdio-default": "cd ../.. && npx wdio ./packages/$npm_package_name/wdio.conf.js",
-    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio ./packages/$npm_package_name/clinical-lowlight-wdio.conf.js",
-    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio ./packages/$npm_package_name/wdio.conf.js",
+    "wdio-default": "cd ../.. && npx wdio",
+    "wdio-lowlight": "cd ../.. && THEME=clinical-lowlight-theme npx wdio",
+    "wdio-fusion": "cd ../.. && THEME=orion-fusion-theme npx wdio",
     "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
   },
-  "gitHead": "e927629a58df3d3d4394ceefbc7f7993ce532360"
+  "gitHead": "e66cb450a62b819661ab4ca3ae8de31f52f98a88"
 }

src/Header.jsx

@@ -1,7 +0,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
+
 import styles from './Header.module.scss';
 
-const cx = classNames.bind(styles);
+const cx = classNamesBind.bind(styles);
 
@@ -47,6 +50,3 @@ const propTypes = {
 }) => {
-  let startElement;
-  if (startContent) {
-    startElement = <div className={cx('flex-end')}>{startContent}</div>;
-  }
+  const theme = useContext(ThemeContext);
 
@@ -64,26 +64,25 @@ let titleElement;
 
-  let endElement;
-  if (endContent) {
-    endElement = <div className={cx('flex-end')}>{endContent}</div>;
-  }
+  const content = React.Children.map(children, child => (
+    React.cloneElement(child, {
+      className: classNames([cx('flex-collapse'), children.props.className]),
+    })
+  ));
 
-  let childElement;
-  if (children) {
-    const childClassNames = cx([
-      'flex-collapse',
-      children.props.className,
-    ]);
-    childElement = React.cloneElement(children, { className: childClassNames });
-  }
+  const headerClassNames = classNames([
+    cx([
+      'flex-header',
+      { subheader: isSubheader },
+      theme.className,
+    ]),
+    customProps.className,
+  ]);
 
-  const headerClass = isSubheader ? 'flex-subheader' : 'flex-header';
-
   return (
-    <header {...customProps} className={cx(headerClass, customProps.className)}>
-      {startElement}
+    <header {...customProps} className={headerClassNames}>
+      {startContent && <div className={cx('flex-end')}>{startContent}</div>}
       <div className={cx('flex-fill')}>
         {titleElement}
       </div>
-      {childElement}
-      {endElement}
+      {content}
+      {endContent && <div className={cx('flex-end')}>{endContent}</div>}
     </header>
@@ -90,0 +89,0 @@ );

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

@@ -26,5 +26,5 @@ import React from 'react';
     startContent={startContent}
-    title="LongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitle"
+    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."
     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="LongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitle" />;
+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." />;
 
 export default () => LongTitleHeader;

No alert changes

Improved metrics

Total package byte prevSize

64575

increased by8.18%

Number of package files

53

increased by1.92%

Worsened metrics

Dependency count

6

increased by20%

Lines of code

767

decreased by-1.03%

Dependency changes

• + Addedterra-theme-context@^1.0.0