@cloudflare/component-link - npm Package Compare versions

Comparing version 1.0.9 to 1.0.11

CHANGELOG.md

@@ -6,3 +6,11 @@ # Change Log
 
-       <a name="1.0.9"></a>
+ <a name="1.0.11"></a>
+## [1.0.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@1.0.9...@cloudflare/component-link@1.0.11) (2018-06-07)
+
+
+
+
+**Note:** Version bump only for package @cloudflare/component-link
+
+ <a name="1.0.9"></a>
 ## [1.0.9](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@1.0.7...@cloudflare/component-link@1.0.9) (2018-06-07)
@@ -18,3 +26,3 @@
 
-       <a name="1.0.7"></a>
+<a name="1.0.7"></a>
 ## [1.0.7](http://stash.cfops.it:7999/www/cf-ux/compare/@cloudflare/component-link@1.0.6...@cloudflare/component-link@1.0.7) (2018-05-25)
@@ -21,0 +29,0 @@

es/index.js

@@ -1,22 +0,7 @@
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinkTheme = exports.LinkUnstyled = exports.Link = undefined;
+import LinkUnstyled from './Link';
+import LinkTheme from './LinkTheme';
+import { applyTheme } from '@cloudflare/style-container';
 
-var _Link = require('./Link');
+var Link = applyTheme(LinkUnstyled, LinkTheme);
 
-var _Link2 = _interopRequireDefault(_Link);
-
-var _LinkTheme = require('./LinkTheme');
-
-var _LinkTheme2 = _interopRequireDefault(_LinkTheme);
-
-var _styleContainer = require('@cloudflare/style-container');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Link = (0, _styleContainer.applyTheme)(_Link2.default, _LinkTheme2.default);
-
-exports.Link = Link;
-exports.LinkUnstyled = _Link2.default;
-exports.LinkTheme = _LinkTheme2.default;
+export { Link, LinkUnstyled, LinkTheme };

es/Link.js

@@ -1,23 +0,3 @@
-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');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _utilRouteHandler = require('@cloudflare/util-route-handler');
-
-var _styleContainer = require('@cloudflare/style-container');
-
-var _componentArrowSwivel = require('@cloudflare/component-arrow-swivel');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
@@ -31,2 +11,8 @@
 
+import React from 'react';
+import PropTypes from 'prop-types';
+import { routeTo } from '@cloudflare/util-route-handler';
+import { createComponent } from '@cloudflare/style-container';
+import { ArrowSwivel } from '@cloudflare/component-arrow-swivel';
+
 var linkStyles = function linkStyles(_ref) {
@@ -104,3 +90,3 @@ var theme = _ref.theme,
       if (this.props.to) {
-        (0, _utilRouteHandler.routeTo)(this.props.to);
+        routeTo(this.props.to);
       } else {
@@ -144,7 +130,7 @@ this.props.onClick(e);
 
-      return _react2.default.createElement(
+      return React.createElement(
         'a',
         props,
         children,
-        expandable && _react2.default.createElement(_componentArrowSwivel.ArrowSwivel, { isActive: isActive })
+        expandable && React.createElement(ArrowSwivel, { isActive: isActive })
       );
@@ -155,18 +141,18 @@ }
   return Link;
-}(_react2.default.Component);
+}(React.Component);
 
 Link.propTypes = {
-  to: _propTypes2.default.string,
-  href: _propTypes2.default.string,
-  onClick: _propTypes2.default.func,
-  onFocus: _propTypes2.default.func,
-  onBlur: _propTypes2.default.func,
-  disabled: _propTypes2.default.bool,
-  children: _propTypes2.default.node,
-  role: _propTypes2.default.string,
-  expandable: _propTypes2.default.bool,
-  isActive: _propTypes2.default.bool
+  to: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+  role: PropTypes.string,
+  expandable: PropTypes.bool,
+  isActive: PropTypes.bool
 };
 Link.displayName = 'Link';
 
-exports.default = (0, _styleContainer.createComponent)(linkStyles, Link);
+export default createComponent(linkStyles, Link);

es/LinkTheme.js

@@ -1,6 +0,2 @@
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (baseTheme) {
+export default (function (baseTheme) {
   return {
@@ -31,2 +27,2 @@ textColor: baseTheme.colors.blue[4],
   };
-};
+});

lib/index.js

@@ -20,3 +20,3 @@ 'use strict';
 
-var Link = (0, _styleContainer.applyTheme)(_Link2.default, _LinkTheme2.default);
+const Link = (0, _styleContainer.applyTheme)(_Link2.default, _LinkTheme2.default);
 
@@ -23,0 +23,0 @@ exports.Link = Link;

lib/Link.js

@@ -7,4 +7,2 @@ 'use strict';
 
-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');
@@ -28,54 +26,40 @@
 
-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.textColor,
+  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'].textColor,
+    '& svg': {
+      fill: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].textColor
+    }
+  },
 
-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'].textColor,
+    outline: theme['&:focus'].outline,
+    outlineOffset: theme['&:focus'].outlineOffset,
+    '& svg': {
+      fill: theme['&:focus'].textColor
+    }
+  },
 
-var linkStyles = function linkStyles(_ref) {
-  var theme = _ref.theme,
-      disabled = _ref.disabled;
-  return {
-    display: 'inline-block',
-    color: disabled ? theme.disabledColor : theme.textColor,
-    outline: theme.outline,
-    textDecoration: theme.textDecoration,
-    transition: theme.transition,
-    cursor: disabled ? theme.disabledCursor : theme.cursor,
-
+  '&:active': {
+    color: theme['&:active'].textColor,
+    outline: theme['&:active'].outline,
     '& svg': {
-      fill: disabled ? theme.disabledColor : undefined
-    },
-    '&:hover': {
-      color: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].textColor,
-      '& svg': {
-        fill: disabled ? theme['&:hover'].disabledColor : theme['&:hover'].textColor
-      }
-    },
-
-    '&:focus': {
-      color: theme['&:focus'].textColor,
-      outline: theme['&:focus'].outline,
-      outlineOffset: theme['&:focus'].outlineOffset,
-      '& svg': {
-        fill: theme['&:focus'].textColor
-      }
-    },
-
-    '&:active': {
-      color: theme['&:active'].textColor,
-      outline: theme['&:active'].outline,
-      '& svg': {
-        fill: theme['&:active'].textColor
-      }
+      fill: theme['&:active'].textColor
     }
-  };
-};
+  }
+});
 
-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) {
@@ -85,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, _utilRouteHandler.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, _utilRouteHandler.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(_componentArrowSwivel.ArrowSwivel, { isActive: isActive })
+    );
+  }
+}
 
-      return _react2.default.createElement(
-        'a',
-        props,
-        children,
-        expandable && _react2.default.createElement(_componentArrowSwivel.ArrowSwivel, { isActive: isActive })
-      );
-    }
-  }]);
-
-  return Link;
-}(_react2.default.Component);
-
 Link.propTypes = {
@@ -160,0 +133,0 @@ to: _propTypes2.default.string,

lib/LinkTheme.js

@@ -7,28 +7,26 @@ 'use strict';
 
-exports.default = function (baseTheme) {
-  return {
-    textColor: baseTheme.colors.blue[4],
-    disabledColor: baseTheme.colors.gray[4],
-    outline: 'none',
-    textDecoration: 'none',
-    transition: 'all 150ms ease',
-    cursor: 'pointer',
-    disabledCursor: 'default',
+exports.default = baseTheme => ({
+  textColor: baseTheme.colors.blue[4],
+  disabledColor: baseTheme.colors.gray[4],
+  outline: 'none',
+  textDecoration: 'none',
+  transition: 'all 150ms ease',
+  cursor: 'pointer',
+  disabledCursor: 'default',
 
-    '&:hover': {
-      textColor: baseTheme.colors.orange[6],
-      disabledColor: baseTheme.colors.gray[4]
-    },
+  '&:hover': {
+    textColor: baseTheme.colors.orange[6],
+    disabledColor: baseTheme.colors.gray[4]
+  },
 
-    '&:focus': {
-      outline: '5px auto -webkit-focus-ring-color',
-      outlineOffset: '-1px',
-      textColor: baseTheme.colors.blue[4]
-    },
+  '&:focus': {
+    outline: '5px auto -webkit-focus-ring-color',
+    outlineOffset: '-1px',
+    textColor: baseTheme.colors.blue[4]
+  },
 
-    '&:active': {
-      textColor: baseTheme.colors.orange[7],
-      outline: 'none'
-    }
-  };
-};
+  '&:active': {
+    textColor: baseTheme.colors.orange[7],
+    outline: 'none'
+  }
+});

package.json

 {
   "name": "@cloudflare/component-link",
   "description": "Cloudflare Link Component",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "lib/index.js",
@@ -18,5 +18,5 @@ "module": "es/index.js",
   "dependencies": {
-    "@cloudflare/component-arrow-swivel": "^1.0.8",
-    "@cloudflare/style-container": "^1.0.8",
-    "@cloudflare/util-route-handler": "^1.0.4",
+    "@cloudflare/component-arrow-swivel": "^1.0.10",
+    "@cloudflare/style-container": "^1.0.10",
+    "@cloudflare/util-route-handler": "^1.0.6",
     "prop-types": "^15.6.0"
@@ -23,0 +23,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

30513

-9%

Lines of code

446

-8.61%

Dependency changes

• Updated

  @cloudflare/component-arrow-swivel@^1.0.10

• Updated

  @cloudflare/style-container@^1.0.10

• Updated

  @cloudflare/util-route-handler@^1.0.6