td-stylekit - npm Package Compare versions

Comparing version 0.15.2 to 0.15.3

dist/es/MegaMenu/MegaMenuItem.js

@@ -63,3 +63,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
             Title,
-            { disabled: disabled },
+            { disabled: disabled, hovered: this.state.hovered },
             title
@@ -66,0 +66,0 @@ ),

dist/es/MegaMenu/MegaMenuItemElements.js

@@ -27,5 +27,6 @@ import PropTypes from 'prop-types';
   var theme = _ref2.theme,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      hovered = _ref2.hovered;
   return {
-    color: disabled ? theme.color.DarkSecondary : theme.color.PrimaryContrast,
+    color: disabled ? theme.color.DarkSecondary : hovered ? theme.color.Aquamarine : theme.color.PrimaryContrast,
     overflow: 'hidden',
@@ -107,3 +108,3 @@ textOverflow: 'ellipsis',
     transition: 'transform 200ms',
-    transform: hovered && !disabled && 'scale(1.1)',
+    transform: !disabled && !hovered && 'scale(0.9)',
     '@media (max-width: 1000px)': {
@@ -110,0 +111,0 @@ marginLeft: 'auto',

dist/es/NavigationBar/NavigationBar.js

@@ -8,2 +8,3 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
+
 import NavigationItem from './NavigationItem';
@@ -54,8 +55,13 @@ import UtilityItem from './UtilityItem';
 
+// $FlowFixMe: don't know how to extend GlamorousComponentInstance
 NavigationBar.Separator = Separator;
+// $FlowFixMe
 NavigationBar.NavigationItem = NavigationItem;
+// $FlowFixMe
 NavigationBar.UtilityItem = UtilityItem;
+// $FlowFixMe
 NavigationBar.PrimaryAction = PrimaryAction;
+// $FlowFixMe
 NavigationBar.SecondaryAction = SecondaryAction;
 
 export default NavigationBar;

dist/es/NavigationBar/PrimaryAction.js

@@ -5,2 +5,17 @@ import PropTypes from 'prop-types';
 
+
+var hoverStyle = function hoverStyle(theme) {
+  return {
+    '&::after': {
+      content: '\'\'',
+      position: 'absolute',
+      bottom: 0,
+      left: theme.space[4],
+      right: theme.space[4],
+      height: 1,
+      backgroundColor: theme.color.Aquamarine
+    }
+  };
+};
+
 /**
@@ -19,16 +34,7 @@ * Main action for a NavigationItem
     display: 'flex',
-    color: theme.color.LightDisabled,
+    color: theme.color.DarkPrimary,
     padding: '0 ' + theme.space[4],
     ':hover': {
       textDecoration: 'none',
-      color: theme.color.LightDisabled,
-      '&::after': {
-        content: '\'\'',
-        position: 'absolute',
-        bottom: 0,
-        left: theme.space[4],
-        right: theme.space[4],
-        height: 2,
-        backgroundColor: theme.color.Aquamarine
-      }
+      color: theme.color.DarkPrimary
     }
@@ -59,2 +65,6 @@ };
   };
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      hovered = _ref4.hovered;
+  return hovered && hoverStyle(theme);
 });
@@ -66,5 +76,7 @@ PrimaryAction.displayName = 'PrimaryAction';
   /** Enabled disabled style */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /** Enabled hover style */
+  hovered: PropTypes.bool
 };
 
 export default PrimaryAction;

dist/es/NavigationBar/SecondaryAction.js

@@ -13,2 +13,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+
 /**
@@ -15,0 +16,0 @@ * Dumb component that can be rendered as any other component.

dist/es/NavigationBar/UtilityItem.js

@@ -41,9 +41,11 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   var children = _ref.children,
-      tooltip = _ref.tooltip;
+      tooltip = _ref.tooltip,
+      tooltipMenu = _ref.tooltipMenu;
 
-  if (tooltip) {
+  var isMenu = !tooltip && !!tooltipMenu;
+  if (tooltip || tooltipMenu) {
     var overlay = React.createElement(
       NavigationPopover,
-      null,
-      tooltip
+      { isMenu: isMenu, arrowHidden: !isMenu },
+      tooltip || tooltipMenu
     );
@@ -54,4 +56,5 @@ return React.createElement(
         overlay: overlay,
-        delay: 150,
-        placement: OverlayTrigger.PLACEMENT.BOTTOM
+        delay: 100,
+        placement: OverlayTrigger.PLACEMENT.BOTTOM,
+        overlayIsInteractive: isMenu
       },
@@ -70,7 +73,8 @@ children
   var tooltip = _ref2.tooltip,
-      props = _objectWithoutProperties(_ref2, ['tooltip']);
+      tooltipMenu = _ref2.tooltipMenu,
+      props = _objectWithoutProperties(_ref2, ['tooltip', 'tooltipMenu']);
 
   return React.createElement(
     Trigger,
-    { tooltip: tooltip },
+    { tooltip: tooltip, tooltipMenu: tooltipMenu },
     React.createElement(StatefulBox, Object.assign({
@@ -93,3 +97,4 @@ align: 'center',
   children: PropTypes.node.isRequired,
-  tooltip: PropTypes.node
+  tooltip: PropTypes.node,
+  tooltipMenu: PropTypes.node
 };
@@ -96,0 +101,0 @@

dist/es/NavigationPopover/NavigationPopover.js

@@ -6,17 +6,23 @@ import Popover from '../Popover';
 
+
 var NavigationPopover = glamorous(Popover)(function (_ref) {
-  var theme = _ref.theme;
-  return {
+  var theme = _ref.theme,
+      isMenu = _ref.isMenu;
+  return Object.assign({
     color: theme.color.DarkPrimary,
     fontFamily: theme.fontFamily.accent,
-    fontSize: theme.fontSize[1],
-    marginTop: 0,
+    fontSize: theme.fontSize[0],
     paddingTop: theme.space[2],
     paddingBottom: theme.space[2],
     letterSpacing: 0.8
-  };
+  }, isMenu ? {
+    marginTop: 0
+  } : {
+    paddingLeft: theme.space[2],
+    paddingRight: theme.space[2]
+  });
 }).withProps(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    backgroundColor: theme.color.DarkBar,
+    backgroundColor: theme.color.Black,
     borderColor: 'rgba(0,0,0,0.2)'
@@ -26,4 +32,5 @@ };
 NavigationPopover.displayName = 'NavigationPopover';
-NavigationPopover.propTypes = null;
+NavigationPopover.propTypes = {};
 
+// $FlowFixMe: extend GlamorousComponentInstance statics
 NavigationPopover.Heading = glamorous(Heading)(function (_ref3) {
@@ -33,3 +40,3 @@ var theme = _ref3.theme;
     borderBottom: '1px solid ' + theme.color.DarkSecondary,
-    color: theme.color.LightDivider,
+    color: theme.color.LightDisabled,
     paddingTop: theme.space[2],
@@ -45,4 +52,5 @@ paddingBottom: theme.space[4],
 NavigationPopover.Heading.displayName = 'NavigationPopoverHeading';
-NavigationPopover.Heading.propTypes = null;
+NavigationPopover.Heading.propTypes = {};
 
+// $FlowFixMe: extend GlamorousComponentInstance statics
 NavigationPopover.Item = glamorous(Link)(function (_ref4) {
@@ -66,4 +74,5 @@ var theme = _ref4.theme;
 NavigationPopover.Item.displayName = 'NavigationPopoverItem';
-NavigationPopover.Item.propTypes = null;
+NavigationPopover.Item.propTypes = {};
 
+// $FlowFixMe: extend GlamorousComponentInstance statics
 NavigationPopover.Divider = glamorous('div')(function (_ref5) {
@@ -78,4 +87,4 @@ var theme = _ref5.theme;
 NavigationPopover.Divider.displayName = 'NavigationPopoverDivider';
-NavigationPopover.Divider.propTypes = null;
+NavigationPopover.Divider.propTypes = {};
 
 export default NavigationPopover;

dist/es/OverlayTrigger/OverlayTrigger.js

@@ -131,3 +131,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
         }
-      }, isOneOf('hover', this.props.trigger) ? {
+      }, this.props.overlayIsInteractive && isOneOf('hover', this.props.trigger) ? {
         onMouseOver: this.handleMouseOver,
@@ -314,2 +314,7 @@ onMouseOut: this.handleMouseOut
   /**
+   * Don't hide popover when moused over
+   */
+  overlayIsInteractive: PropTypes.bool,
+
+  /**
    * @private
@@ -316,0 +321,0 @@ */

dist/es/Popover/Popover.js

@@ -151,4 +151,5 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
       left = _ref8.arrowOffsetLeft,
+      arrowHidden = _ref8.arrowHidden,
       className = _ref8.className,
-      props = _objectWithoutProperties(_ref8, ['backgroundColor', 'borderColor', 'children', 'style', 'placement', 'arrowOffsetTop', 'arrowOffsetLeft', 'className']);
+      props = _objectWithoutProperties(_ref8, ['backgroundColor', 'borderColor', 'children', 'style', 'placement', 'arrowOffsetTop', 'arrowOffsetLeft', 'arrowHidden', 'className']);
 
@@ -165,3 +166,3 @@ // figure out the direction for the arrow from the placement
     }, props),
-    React.createElement(Arrow, Object.assign({}, direction, {
+    !arrowHidden && React.createElement(Arrow, Object.assign({}, direction, {
       style: { top: top, left: left },
@@ -178,2 +179,3 @@ backgroundColor: backgroundColor,
   arrowOffsetTop: PropTypes.string,
+  arrowHidden: PropTypes.bool,
   backgroundColor: PropTypes.string,
@@ -180,0 +182,0 @@ borderColor: PropTypes.string,

package.json

 {
   "name": "td-stylekit",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "main": "dist/es/index.js",
@@ -5,0 +5,0 @@ "module": "dist/es/index.js",

No alert changes

Improved metrics

Total package byte prevSize

525139

increased by0.24%

Lines of code

4561

increased by0.77%

No dependency changes