td-stylekit - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/es/Icon/Icon.js

@@ -207,3 +207,30 @@ 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; }
     transform: 'translate(0 0)'
-  })]
+  })],
+  HelpInverted: React.createElement(
+    'g',
+    null,
+    React.createElement('path', { d: 'M22.946 22.947a6.99 6.99 0 0 0 0-9.894 7 7 0 1 0 0 9.894zm-8.012 2.445a8 8 0 1 1 8.72-13.046 7.99 7.99 0 0 1 0 11.308 8 8 0 0 1-8.72 1.738z' }),
+    React.createElement('path', { d: 'M16.131 15.196a.5.5 0 1 1-.962-.272c.075-.267.19-.522.335-.745.238-.39.565-.717.948-.951a2.921 2.921 0 0 1 3.128.001 2.96 2.96 0 0 1 1.36 2.481c0 1.001-.455 1.755-1.352 2.63a24.56 24.56 0 0 1-.442.417c-.394.322-.63.8-.646 1.309a.5.5 0 1 1-1-.032 2.736 2.736 0 0 1 .987-2.028c.201-.189.3-.283.402-.382.722-.704 1.051-1.248 1.051-1.912a1.959 1.959 0 0 0-.898-1.64 1.923 1.923 0 0 0-2.06.004c-.256.156-.47.37-.632.635a1.78 1.78 0 0 0-.219.485zM18.6 22.26a.6.6 0 1 1-1.2.02.6.6 0 0 1 1.2-.02' })
+  ),
+  Jobs: React.createElement(
+    'g',
+    null,
+    React.createElement('path', { d: 'M25 12.55A1.55 1.55 0 0 0 23.45 11h-10.9a1.55 1.55 0 0 0 0 3.1h10.9A1.55 1.55 0 0 0 25 12.55zM12.55 15.1a2.55 2.55 0 0 1 0-5.1h10.9a2.55 2.55 0 0 1 0 5.1h-10.9z' }),
+    React.createElement('path', { d: 'M12.75 13.05a.5.5 0 0 1 0-1h8.41a.5.5 0 1 1 0 1h-8.41zM25 23.45a1.55 1.55 0 0 0-1.55-1.55h-10.9a1.55 1.55 0 1 0 0 3.1h10.9A1.55 1.55 0 0 0 25 23.45zM12.55 26a2.55 2.55 0 0 1 0-5.1h10.9a2.55 2.55 0 0 1 0 5.1h-10.9z' }),
+    React.createElement('path', { d: 'M12.75 23.95a.5.5 0 1 1 0-1h2.97a.5.5 0 1 1 0 1h-2.97z' })
+  ),
+  LiveChat: React.createElement(
+    'g',
+    { transform: 'translate(10 10)' },
+    React.createElement('path', { d: 'M.854 15.854A.5.5 0 0 1 0 15.5V3.168A3.18 3.18 0 0 1 3.17 0h9.66A3.181 3.181 0 0 1 16 3.19v7a3.17 3.17 0 0 1-3.17 3.17H3.347L.854 15.854zM3.172 1A2.18 2.18 0 0 0 1 3.17v11.123l1.786-1.787a.5.5 0 0 1 .354-.146h9.69A2.17 2.17 0 0 0 15 10.19V3.188A2.18 2.18 0 0 0 12.829 1H3.172z' }),
+    React.createElement('ellipse', { cx: '5', cy: '6.68', rx: '1', ry: '1' }),
+    React.createElement('ellipse', { cx: '11', cy: '6.68', rx: '1', ry: '1' })
+  ),
+  Feedback: React.createElement(
+    'g',
+    null,
+    React.createElement('path', { d: 'M15.4 18l2.54 1.46v-2.92z' }),
+    React.createElement('path', { d: 'M17.999 13.391l.853-.86a4.24 4.24 0 0 1 6.077.012A4.09 4.09 0 0 1 26 15.288a.5.5 0 1 1-1 .004 3.081 3.081 0 0 0-.798-2.063 3.24 3.24 0 0 0-4.637.003l-1.21 1.22a.5.5 0 0 1-.709.002l-1.206-1.207a3.246 3.246 0 0 0-4.406-.255 3.11 3.11 0 0 0-.12 4.514l5.996 5.997a.1.1 0 0 0 .14 0l3.95-3.86a.5.5 0 1 1 .7.715l-3.95 3.86c-.428.418-1.112.418-1.544-.004l-6-6a4.11 4.11 0 0 1 .174-5.978 4.248 4.248 0 0 1 5.774.31l.845.845z' }),
+    React.createElement('path', { d: 'M25 15.29a.5.5 0 1 1 1 0 3.21 3.21 0 0 1-3.21 3.21h-5.27a.5.5 0 0 1 0-1h5.27c1.22 0 2.21-.99 2.21-2.21z' })
+  )
 };
@@ -210,0 +237,0 @@ export var ICON_TYPES = keymirror(types);

dist/es/MegaMenu/MegaMenuItem.js

@@ -1,60 +0,103 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, TitleContainer, Title, ArrowRight, BodyContainer, ImageContainer, Description, SecondaryAction, DisabledLabel } from './MegaMenuItemElements';
+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; }; }();
 
-function MegaMenuItem(_ref) {
-  var title = _ref.title,
-      disabled = _ref.disabled,
-      disabledTooltip = _ref.disabledTooltip,
-      description = _ref.description,
-      secondaryAction = _ref.secondaryAction,
-      image = _ref.image;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return React.createElement(
-    Container,
-    null,
-    React.createElement(
-      TitleContainer,
-      null,
-      React.createElement(
-        Title,
-        { disabled: disabled },
-        title
-      ),
-      !disabled && React.createElement(ArrowRight, null),
-      disabled && disabledTooltip && React.createElement(
-        DisabledLabel,
-        null,
-        disabledTooltip
-      )
-    ),
-    React.createElement(
-      BodyContainer,
-      null,
-      React.createElement(
-        ImageContainer,
-        { disabled: disabled },
-        image
-      ),
-      React.createElement(
-        Description,
-        { disabled: disabled },
-        description
-      ),
-      !disabled && secondaryAction && React.createElement(
-        SecondaryAction,
-        null,
-        secondaryAction
-      )
-    )
-  );
-}
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-MegaMenuItem.propTypes = {
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  secondaryAction: PropTypes.node,
-  image: PropTypes.node.isRequired
-};
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+import React, { Component } from 'react';
+import { Container, TitleContainer, Title, BodyContainer, ImageContainer, Description, DisabledLabel, SecondaryAction } from './MegaMenuItemElements';
+
+var MegaMenuItem = function (_Component) {
+  _inherits(MegaMenuItem, _Component);
+
+  function MegaMenuItem() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, MegaMenuItem);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MegaMenuItem.__proto__ || Object.getPrototypeOf(MegaMenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      hovered: false
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(MegaMenuItem, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          title = _props.title,
+          disabled = _props.disabled,
+          disabledTooltip = _props.disabledTooltip,
+          description = _props.description,
+          secondaryAction = _props.secondaryAction,
+          image = _props.image;
+
+      return React.createElement(
+        Container,
+        {
+          onMouseEnter: function onMouseEnter() {
+            return _this2.setState(function () {
+              return { hovered: true };
+            });
+          },
+          onMouseLeave: function onMouseLeave() {
+            return _this2.setState(function () {
+              return { hovered: false };
+            });
+          }
+        },
+        React.createElement(
+          TitleContainer,
+          null,
+          React.createElement(
+            Title,
+            { disabled: disabled },
+            title
+          ),
+          disabled && disabledTooltip &&
+          /* $FlowFixMe: context passes theme */
+          React.createElement(
+            DisabledLabel,
+            null,
+            disabledTooltip
+          )
+        ),
+        React.createElement(
+          BodyContainer,
+          null,
+          React.createElement(
+            ImageContainer,
+            { disabled: disabled, hovered: this.state.hovered },
+            image
+          ),
+          React.createElement(
+            Description,
+            { disabled: disabled },
+            React.createElement(
+              'div',
+              null,
+              description
+            ),
+            !disabled && secondaryAction
+          )
+        )
+      );
+    }
+  }]);
+
+  return MegaMenuItem;
+}(Component);
+
+MegaMenuItem.SecondaryAction = SecondaryAction;
+
+
 export default MegaMenuItem;

dist/es/MegaMenu/MegaMenuItemElements.js

 import PropTypes from 'prop-types';
 import glamorous from 'glamorous';
-import Icon from '../Icon';
 import Box from '../Box';
@@ -8,2 +7,3 @@ import Text from '../Text';
 
+
 export var Container = glamorous(Box)(function (_ref) {
@@ -16,3 +16,3 @@ var theme = _ref.theme;
     margin: theme.space[2],
-    overflow: 'hidden'
+    overflow: 'visible'
   };
@@ -36,5 +36,5 @@ }).withProps({
     fontSize: theme.fontSize[3],
-    fontWeight: 'bold',
+    fontWeight: '500',
     fontFamily: theme.fontFamily.accent,
-    letterSpacing: 2,
+    letterSpacing: 1,
     lineHeight: '0.9rem'
@@ -67,12 +67,5 @@ };
 
-export var ArrowRight = glamorous(Icon.Medium.MenuArrowRight)(function (_ref4) {
+export var DisabledLabel = glamorous(Text)(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    color: theme.color.Aquamarine
-  };
-});
-
-export var DisabledLabel = glamorous(Text)(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
     fontSize: '0.5rem',
@@ -93,9 +86,8 @@ color: theme.color.PrimaryContrast,
 
-export var BodyContainer = glamorous(Box)(function (_ref6) {
-  var theme = _ref6.theme;
+export var BodyContainer = glamorous(Box)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
-    height: '9.5rem',
     minWidth: '10rem',
     margin: theme.space[4],
-    overflow: 'hidden'
+    overflow: 'visible'
   };
@@ -108,12 +100,15 @@ }).withProps({
 
-export var ImageContainer = glamorous(Box)(function (_ref7) {
-  var theme = _ref7.theme,
-      disabled = _ref7.disabled;
+export var ImageContainer = glamorous(Box)(function (_ref6) {
+  var theme = _ref6.theme,
+      disabled = _ref6.disabled,
+      hovered = _ref6.hovered;
   return {
-    width: '8.5rem',
-    height: '8.5rem',
-    borderRadius: '4.25rem',
+    width: '7.5rem',
+    height: '7.5rem',
+    borderRadius: '50%',
     overflow: 'hidden',
     color: disabled ? theme.color.DarkSecondary : theme.color.PrimaryContrast,
     opacity: disabled ? 0.4 : 1,
+    transition: 'transform 200ms',
+    transform: hovered && !disabled && 'scale(1.1)',
     '@media (max-width: 1000px)': {
@@ -135,8 +130,9 @@ marginLeft: 'auto',
 
-export var Description = glamorous('div')(function (_ref8) {
-  var theme = _ref8.theme,
-      disabled = _ref8.disabled;
+export var Description = glamorous('div')(function (_ref7) {
+  var theme = _ref7.theme,
+      disabled = _ref7.disabled;
   return {
+    alignSelf: 'center',
     color: disabled ? theme.color.DarkSecondary : theme.color.PrimaryContrast,
-    fontSize: theme.fontSize[1],
+    fontSize: theme.fontSize[2],
     flex: 1,
@@ -157,38 +153,20 @@ overflow: 'hidden',
 
-export var SecondaryAction = glamorous(Button)(function (_ref9) {
-  var theme = _ref9.theme;
+export var SecondaryAction = glamorous(Button)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
-    color: theme.color.Aquamarine,
-    borderColor: theme.color.Aquamarine,
-    backgroundColor: 'transparent',
-    width: 16,
-    height: 16,
-    marginRight: theme.space[2],
-    marginLeft: theme.space[4],
-    '@media (max-width: 1170px)': {
-      marginLeft: theme.space[2]
-    },
+    backgroundColor: '#00a1ff',
+    marginTop: theme.space[4],
     ':hover': {
-      backgroundColor: theme.color.Aquamarine,
-      color: theme.color.DarkBackground
+      backgroundColor: '#2AB1FF'
     },
+    ':focus': {
+      backgroundColor: '#2AB1FF'
+    },
     ':active': {
-      backgroundColor: theme.color.Aquamarine,
-      color: theme.color.DarkBackground
+      backgroundColor: '#00a1ff'
     }
   };
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      hover = _ref10.hover;
-  return hover && {
-    backgroundColor: theme.color.Aquamarine,
-    color: theme.color.DarkBackground
-  };
 }).withProps({
-  circle: true
-}).withComponent('div');
-
-SecondaryAction.displayName = 'MegaMenuItemSecondaryAction';
-SecondaryAction.propTypes = Object.assign({
-  disabled: PropTypes.bool
-}, Button.propTypes);
+  primary: true
+});
+SecondaryAction.displayName = 'MegaMenuItemSecondaryAction';

dist/es/NavigationBar/UtilityItem.js

@@ -19,3 +19,2 @@ 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; }; }();
 // need a class so OverlayTrigger can set a ref
-
 var StatefulBox = function (_Component) {
@@ -84,2 +83,5 @@ _inherits(StatefulBox, _Component);
       marginRight: theme.space[2]
+    },
+    ':hover': {
+      color: theme.color.Aquamarine
     }
@@ -86,0 +88,0 @@ };

dist/es/UserAvatar/UserAvatar.js

@@ -13,3 +13,2 @@ 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; }
   height: 40,
-  borderRadius: '50%',
   overflow: 'hidden',
@@ -19,6 +18,9 @@ position: 'relative',
 }, function (_ref) {
-  var small = _ref.small;
-  return small && {
-    width: 20,
-    height: 20
+  var small = _ref.small,
+      large = _ref.large;
+  return small ? { width: 20, height: 20 } : large ? { width: 120, height: 120 } : {};
+}, function (_ref2) {
+  var square = _ref2.square;
+  return !square && {
+    borderRadius: '50%'
   };
@@ -29,3 +31,3 @@ });
   displayName: 'AvatarFallback',
-  filterProps: ['small']
+  filterProps: ['small', 'large', 'square']
 })({
@@ -43,4 +45,4 @@ display: 'flex',
   fontWeight: 400
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return {
@@ -51,8 +53,8 @@ fontSize: theme.fontSize[1],
   };
-}, function (_ref3) {
-  var small = _ref3.small,
-      theme = _ref3.theme;
-  return small && {
-    fontSize: theme.fontSize[0]
-  };
+}, function (_ref4) {
+  var small = _ref4.small,
+      large = _ref4.large,
+      theme = _ref4.theme;
+
+  return small ? { fontSize: theme.fontSize[0] } : large ? { fontSize: theme.fontSize[5] } : {};
 });
@@ -69,4 +71,4 @@
   zIndex: 0
-}, function (_ref4) {
-  var avatarUrl = _ref4.avatarUrl;
+}, function (_ref5) {
+  var avatarUrl = _ref5.avatarUrl;
   return avatarUrl && {
@@ -80,7 +82,9 @@ // This needs to be a background-image because users can
 
-var UserAvatar = function UserAvatar(_ref5) {
-  var avatarUrl = _ref5.avatarUrl,
-      name = _ref5.name,
-      small = _ref5.small,
-      props = _objectWithoutProperties(_ref5, ['avatarUrl', 'name', 'small']);
+var UserAvatar = function UserAvatar(_ref6) {
+  var avatarUrl = _ref6.avatarUrl,
+      name = _ref6.name,
+      small = _ref6.small,
+      large = _ref6.large,
+      square = _ref6.square,
+      props = _objectWithoutProperties(_ref6, ['avatarUrl', 'name', 'small', 'large', 'square']);
 
@@ -92,6 +96,11 @@ var initials = (name || '').split(' ').map(function (part) {
     Container,
-    Object.assign({ title: name, small: small }, props),
+    Object.assign({
+      title: name,
+      small: small,
+      large: large,
+      square: square
+    }, props),
     React.createElement(
       AvatarFallback,
-      { key: 'initials', small: small },
+      { key: 'initials', small: small, large: large },
       initials
@@ -111,5 +120,9 @@ ),
   /** Toggle the UserAvatar into small mode */
-  small: PropTypes.bool
+  small: PropTypes.bool,
+  /** Toggle the UserAvatar into large mode */
+  large: PropTypes.bool,
+  /** Render the UserAvatar as square */
+  square: PropTypes.bool
 };
 
 export default UserAvatar;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

523703

increased by1%

Lines of code

4519

increased by1.25%

No dependency changes