cf-component-link - npm Package Compare versions

Comparing version 5.0.1 to 5.0.3

CHANGELOG.md

@@ -6,3 +6,19 @@ # Change Log
 
- <a name="5.0.1"></a>
+ <a name="5.0.3"></a>
+## [5.0.3](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-link@5.0.2...cf-component-link@5.0.3) (2017-10-23)
+
+
+
+
+**Note:** Version bump only for package cf-component-link
+
+ <a name="5.0.2"></a>
+## [5.0.2](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-link@5.0.1...cf-component-link@5.0.2) (2017-10-20)
+
+
+
+
+**Note:** Version bump only for package cf-component-link
+
+<a name="5.0.1"></a>
 ## [5.0.1](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-link@5.0.0...cf-component-link@5.0.1) (2017-10-17)
@@ -18,3 +34,3 @@
 
- <a name="5.0.0"></a>
+<a name="5.0.0"></a>
 # [5.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-link@4.2.3...cf-component-link@5.0.0) (2017-10-13)
@@ -21,0 +37,0 @@

lib/index.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.LinkTheme = exports.LinkUnstyled = exports.Link = undefined;
@@ -14,7 +16,7 @@
 
-var _cfStyleContainer = require('cf-style-container');
+var _cfStyleContainer = require('../../cf-style-container/src/index.js');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Link = (0, _cfStyleContainer.applyTheme)(_Link2.default, _LinkTheme2.default);
+const Link = (0, _cfStyleContainer.applyTheme)(_Link2.default, _LinkTheme2.default);
 
@@ -21,0 +23,0 @@ exports.Link = Link;

lib/Link.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-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 _react = require('react');
@@ -15,7 +15,7 @@
 
-var _cfUtilRouteHandler = require('cf-util-route-handler');
+var _cfUtilRouteHandler = require('../../cf-util-route-handler/src/index.js');
 
-var _cfStyleContainer = require('cf-style-container');
+var _cfStyleContainer = require('../../cf-style-container/src/index.js');
 
-var _cfComponentArrowSwivel = require('cf-component-arrow-swivel');
+var _cfComponentArrowSwivel = require('../../cf-component-arrow-swivel/src/index.js');
 
@@ -26,54 +26,40 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+const linkStyles = ({ theme, disabled }) => ({
+  display: 'inline-block',
+  color: disabled ? theme.disabledColor : theme.color,
+  outline: theme.outline,
+  textDecoration: theme.textDecoration,
+  transition: theme.transition,
+  cursor: disabled ? theme.disabledCursor : theme.cursor,
 
-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; }
+  '& svg': {
+    fill: disabled ? theme.disabledColor : undefined
+  },
+  '&:hover': {
+    color: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].color,
+    '& svg': {
+      fill: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].color
+    }
+  },
 
-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; }
+  '&:focus': {
+    color: theme['&:focus'].color,
+    outline: theme['&:focus'].outline,
+    outlineOffset: theme['&:focus'].outlineOffset,
+    '& svg': {
+      fill: theme['&:focus'].color
+    }
+  },
 
-var linkStyles = function linkStyles(_ref) {
-  var theme = _ref.theme,
-      disabled = _ref.disabled;
-  return {
-    display: 'inline-block',
-    color: disabled ? theme.disabledColor : theme.color,
-    outline: theme.outline,
-    textDecoration: theme.textDecoration,
-    transition: theme.transition,
-    cursor: disabled ? theme.disabledCursor : theme.cursor,
-
+  '&:active': {
+    color: theme['&:active'].color,
+    outline: theme['&:active'].outline,
     '& svg': {
-      fill: disabled ? theme.disabledColor : undefined
-    },
-    '&:hover': {
-      color: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].color,
-      '& svg': {
-        fill: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].color
-      }
-    },
-
-    '&:focus': {
-      color: theme['&:focus'].color,
-      outline: theme['&:focus'].outline,
-      outlineOffset: theme['&:focus'].outlineOffset,
-      '& svg': {
-        fill: theme['&:focus'].color
-      }
-    },
-
-    '&:active': {
-      color: theme['&:active'].color,
-      outline: theme['&:active'].outline,
-      '& svg': {
-        fill: theme['&:active'].color
-      }
+      fill: theme['&:active'].color
     }
-  };
-};
+  }
+});
 
-var Link = function (_React$Component) {
-  _inherits(Link, _React$Component);
-
-  function Link(props, context) {
-    _classCallCheck(this, Link);
-
+class Link extends _react2.default.Component {
+  constructor(props, context) {
     if (!props.to && !props.onClick) {
@@ -83,75 +69,64 @@ throw new Error('<Link/> requires either a `to` or `onClick` prop');
 
-    var _this = _possibleConstructorReturn(this, (Link.__proto__ || Object.getPrototypeOf(Link)).call(this, props, context));
+    super(props, context);
 
-    _this.handleClick = _this.handleClick.bind(_this);
-    _this.focus = _this.focus.bind(_this);
-    return _this;
+    this.handleClick = this.handleClick.bind(this);
+    this.focus = this.focus.bind(this);
   }
 
-  _createClass(Link, [{
-    key: 'focus',
-    value: function focus() {
-      this.link.focus();
-    }
-  }, {
-    key: 'handleClick',
-    value: function handleClick(e) {
-      e.preventDefault();
+  focus() {
+    this.link.focus();
+  }
 
-      if (this.props.disabled) {
-        return;
-      }
+  handleClick(e) {
+    e.preventDefault();
 
-      if (this.props.to) {
-        (0, _cfUtilRouteHandler.routeTo)(this.props.to);
-      } else {
-        this.props.onClick(e);
-      }
+    if (this.props.disabled) {
+      return;
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
 
-      var _props = this.props,
-          to = _props.to,
-          children = _props.children,
-          disabled = _props.disabled,
-          isActive = _props.isActive,
-          expandable = _props.expandable,
+    if (this.props.to) {
+      (0, _cfUtilRouteHandler.routeTo)(this.props.to);
+    } else {
+      this.props.onClick(e);
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      to,
+      children,
+      disabled,
+      isActive,
+      expandable
+    } = _props,
           props = _objectWithoutProperties(_props, ['to', 'children', 'disabled', 'isActive', 'expandable']);
+    if (!props.href) {
+      props.href = to || '#!';
+    }
 
-      if (!props.href) {
-        props.href = to || '#!';
+    if (!props.role) {
+      if (to) {
+        props.role = 'link';
+      } else if (!to) {
+        props.role = 'button';
       }
+    }
 
-      if (!props.role) {
-        if (to) {
-          props.role = 'link';
-        } else if (!to) {
-          props.role = 'button';
-        }
-      }
+    if (disabled) {
+      props.disabled = true;
+    }
+    props.onClick = this.handleClick;
 
-      if (disabled) {
-        props.disabled = true;
-      }
-      props.onClick = this.handleClick;
+    props.ref = node => this.link = node;
 
-      props.ref = function (node) {
-        return _this2.link = node;
-      };
+    return _react2.default.createElement(
+      'a',
+      props,
+      children,
+      expandable && _react2.default.createElement(_cfComponentArrowSwivel.ArrowSwivel, { isActive: isActive, onClick: props.onClick })
+    );
+  }
+}
 
-      return _react2.default.createElement(
-        'a',
-        props,
-        children,
-        expandable && _react2.default.createElement(_cfComponentArrowSwivel.ArrowSwivel, { isActive: isActive, onClick: props.onClick })
-      );
-    }
-  }]);
-
-  return Link;
-}(_react2.default.Component);
-
 Link.propTypes = {
@@ -158,0 +133,0 @@ to: _propTypes2.default.string,

lib/LinkTheme.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-exports.default = function (baseTheme) {
-  return {
-    color: baseTheme.colors.marine,
-    disabledColor: baseTheme.colors.cement,
-    outline: 'none',
-    textDecoration: 'none',
-    transition: 'all 150ms ease',
-    cursor: 'pointer',
-    disabledCursor: 'default',
+exports.default = baseTheme => ({
+  color: baseTheme.colors.marine,
+  disabledColor: baseTheme.colors.cement,
+  outline: 'none',
+  textDecoration: 'none',
+  transition: 'all 150ms ease',
+  cursor: 'pointer',
+  disabledCursor: 'default',
 
-    '&:hover': {
-      color: baseTheme.colors.tangerine,
-      disabledColor: baseTheme.colors.cement
-    },
+  '&:hover': {
+    color: baseTheme.colors.tangerine,
+    disabledColor: baseTheme.colors.cement
+  },
 
-    '&:focus': {
-      color: baseTheme.colors.sky,
-      outline: '5px auto -webkit-focus-ring-color',
-      outlineOffset: '-1px'
-    },
+  '&:focus': {
+    color: baseTheme.colors.sky,
+    outline: '5px auto -webkit-focus-ring-color',
+    outlineOffset: '-1px'
+  },
 
-    '&:active': {
-      color: baseTheme.colors.sunrise,
-      outline: 'none'
-    }
-  };
-};
+  '&:active': {
+    color: baseTheme.colors.sunrise,
+    outline: 'none'
+  }
+});

package.json

 {
   "name": "cf-component-link",
   "description": "Cloudflare Link Component",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "main": "lib/index.js",
@@ -17,7 +17,7 @@ "module": "es/index.js",
   "dependencies": {
-    "cf-component-arrow-swivel": "^2.0.0",
-    "cf-style-container": "^5.0.3",
-    "cf-util-route-handler": "^4.2.1",
+    "cf-component-arrow-swivel": "^2.0.1",
+    "cf-style-container": "^5.2.0",
+    "cf-util-route-handler": "^4.2.2",
     "prop-types": "^15.5.8"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

15150

decreased by-10.16%

Number of package files

9

decreased by-10%

Lines of code

307

decreased by-5.54%

Dependency changes

• Updatedcf-component-arrow-swivel@^2.0.1

• Updatedcf-style-container@^5.2.0

• Updatedcf-util-route-handler@^4.2.2