terra-popup - npm Package Compare versions

Comparing version 6.34.0 to 6.35.0

CHANGELOG.md

@@ -7,2 +7,7 @@ Changelog
 
+6.35.0 - (June 9, 2020)
+------------------
+### Changed
+* Apply themes by context and directly include packaged themes.
+
 6.34.0 - (June 2, 2020)
@@ -9,0 +14,0 @@ ------------------

lib/_PopupArrow.js

@@ -18,4 +18,8 @@ "use strict";
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
+
 var _PopupArrowModule = _interopRequireDefault(require("./PopupArrow.module.scss"));
@@ -42,7 +46,11 @@
 
-var PopupArrow = function PopupArrow(_ref) {
-  var refCallback = _ref.refCallback,
-      customProps = (0, _objectWithoutProperties2.default)(_ref, ["refCallback"]);
+var PopupArrow = function PopupArrow(props) {
+  var refCallback = props.refCallback,
+      customProps = (0, _objectWithoutProperties2.default)(props, ["refCallback"]);
+
+  var theme = _react.default.useContext(_terraThemeContext.default);
+
+  var arrowClass = (0, _classnames.default)(cx('popup-arrow', theme.className), customProps.className);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, customProps, {
-    className: cx(['popup-arrow', customProps.className]),
+    className: arrowClass,
     ref: refCallback
@@ -49,0 +57,0 @@ }));

lib/_PopupContent.js

@@ -32,4 +32,8 @@ "use strict";
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
+
 var _terraButton = _interopRequireDefault(require("terra-button"));
@@ -262,3 +266,4 @@
 
-      var contentClassNames = cx(['content', customProps.className]);
+      var theme = this.context;
+      var contentClassNames = (0, _classnames.default)(cx('content', theme.className), customProps.className);
       var roundedCorners = arrow && !isFullScreen;
@@ -334,3 +339,4 @@ var arrowContent = roundedCorners ? arrow : undefined;
 PopupContent.defaultProps = defaultProps;
+PopupContent.contextType = _terraThemeContext.default;
 var _default = PopupContent;
 exports.default = _default;

lib/_PopupOverlay.js

@@ -30,4 +30,8 @@ "use strict";
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
+
 var _PopupOverlayModule = _interopRequireDefault(require("./PopupOverlay.module.scss"));
@@ -103,6 +107,7 @@
       delete customProps.onRequestClose;
+      var theme = this.context;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         onClick: this.handleOnClick
       }, customProps, {
-        className: cx(['popup-overlay', customProps.className])
+        className: (0, _classnames.default)(cx('popup-overlay', theme.className), customProps.className)
       }), /*#__PURE__*/_react.default.createElement("div", {
@@ -118,3 +123,4 @@ className: cx('inner')
 PopupOverlay.defaultProps = defaultProps;
+PopupOverlay.contextType = _terraThemeContext.default;
 var _default = PopupOverlay;
 exports.default = _default;

package.json

 {
   "name": "terra-popup",
   "main": "lib/Popup.js",
-  "version": "6.34.0",
+  "version": "6.35.0",
   "description": "The Terra Popup is higher order component that launches terra-hookshot positioned content with the ability to display a dynamic arrow.",
@@ -37,7 +37,8 @@ "repository": {
     "terra-hookshot": "^5.27.0",
-    "terra-mixins": "^1.0.0"
+    "terra-mixins": "^1.0.0",
+    "terra-theme-context": "^1.0.0"
   },
   "devDependencies": {
     "terra-disclosure-manager": "^4.33.0",
-    "terra-modal-manager": "^6.34.0"
+    "terra-modal-manager": "^6.35.0"
   },
@@ -57,3 +58,3 @@ "scripts": {
   },
-  "gitHead": "321e0043c06e708739ea69c2c7ff68a5c14e62b3"
+  "gitHead": "b2816ecdf6eef999c8479e28b9af1e01c24f13cb"
 }

src/_PopupArrow.jsx

 import React 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 './PopupArrow.module.scss';
 
-const cx = classNames.bind(styles);
+const cx = classNamesBind.bind(styles);
 /**
@@ -23,7 +25,19 @@ * Half the base of the arrow, to use for arrow positioning offset.
 
-const PopupArrow = ({
-  refCallback,
-  ...customProps
-}) => <div {...customProps} className={cx(['popup-arrow', customProps.className])} ref={refCallback} />;
+const PopupArrow = (props) => {
+  const {
+    refCallback,
+    ...customProps
+  } = props;
+  const theme = React.useContext(ThemeContext);
+  const arrowClass = classNames(
+    cx(
+      'popup-arrow',
+      theme.className,
+    ),
+    customProps.className,
+  );
 
+  return <div {...customProps} className={arrowClass} ref={refCallback} />;
+};
+
 PopupArrow.propTypes = propTypes;
@@ -30,0 +44,0 @@ PopupArrow.Opts = {

src/_PopupContent.jsx

 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 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 Button from 'terra-button';
@@ -11,3 +13,3 @@ import ContentContainer from 'terra-content-container';
 
-const cx = classNames.bind(styles);
+const cx = classNamesBind.bind(styles);
 /**
@@ -198,7 +200,9 @@ * Rounded corner size to be used when calculating the arrow offset.
     }
+    const theme = this.context;
 
-    const contentClassNames = cx([
+    const contentClassNames = classNames(cx(
       'content',
-      customProps.className,
-    ]);
+      theme.className,
+    ),
+    customProps.className);
 
@@ -245,2 +249,3 @@ const roundedCorners = arrow && !isFullScreen;
 PopupContent.defaultProps = defaultProps;
+PopupContent.contextType = ThemeContext;
 
@@ -247,0 +252,0 @@ export default PopupContent;

src/_PopupOverlay.jsx

 import React 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 './PopupOverlay.module.scss';
 
-const cx = classNames.bind(styles);
+const cx = classNamesBind.bind(styles);
 
@@ -54,2 +56,3 @@ const propTypes = {
     delete customProps.onRequestClose;
+    const theme = this.context;
 
@@ -62,3 +65,3 @@ return (
           {...customProps}
-          className={cx(['popup-overlay', customProps.className])}
+          className={classNames(cx('popup-overlay', theme.className), customProps.className)}
         >
@@ -75,3 +78,4 @@ <div className={cx('inner')} />
 PopupOverlay.defaultProps = defaultProps;
+PopupOverlay.contextType = ThemeContext;
 
 export default PopupOverlay;

tests/jest/Popup.test.jsx

 import React from 'react';
+import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 import PopupDefaultExample from './PopupDefaultExample';
@@ -29,1 +30,10 @@
 });
+
+it('correctly applies the theme context className', () => {
+  const result = mount(
+    <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>
+      <PopupDefaultExample classNameArrow="terra-test-class-arrow" />
+    </ThemeContextProvider>,
+  );
+  expect(result).toMatchSnapshot();
+});

tests/jest/PopupContent.test.jsx

 import React from 'react';
 /* eslint-disable import/no-extraneous-dependencies */
 import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
+import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 import PopupContent, * as PopupContentExports from '../../src/_PopupContent';
@@ -27,2 +28,11 @@
       });
+
+      it('correctly applies the theme context className', () => {
+        const result = mountWithIntl(
+          <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>
+            {subject}
+          </ThemeContextProvider>,
+        );
+        expect(result).toMatchSnapshot();
+      });
     });
@@ -29,0 +39,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

387899

increased by2.2%

Number of package files

191

increased by5.52%

Lines of code

7773

increased by0.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Addedterra-theme-context@^1.0.0