@cloudflare/component-link - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+      <a name="3.0.0"></a>
+# [3.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@2.0.1...@cloudflare/component-link@3.0.0) (2018-07-12)
+
+
+### Features
+
+* **style-const:** UI-700: removed deprecated color definitions ([781e1aa](http://stash.cfops.it:7999/fe/stratus/commits/781e1aa))
+
+
+### BREAKING CHANGES
+
+* **style-const:** deprecated colors are no longer accessible from the base 'theme' object
+
+
+
+
       <a name="2.0.1"></a>
@@ -15,3 +31,3 @@ ## [2.0.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@2.0.0...@cloudflare/component-link@2.0.1) (2018-07-03)
 
-      <a name="2.0.0"></a>
+    <a name="2.0.0"></a>
 # [2.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@1.0.19...@cloudflare/component-link@2.0.0) (2018-06-29)
@@ -32,3 +48,3 @@
 
-    <a name="1.0.19"></a>
+  <a name="1.0.19"></a>
 
@@ -39,3 +55,3 @@ ## [1.0.19](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@1.0.18...@cloudflare/component-link@1.0.19) (2018-06-29)
 
-  <a name="1.0.18"></a>
+<a name="1.0.18"></a>
 
@@ -42,0 +58,0 @@ ## [1.0.18](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-link@1.0.17...@cloudflare/component-link@1.0.18) (2018-06-21)

es/index.js

 import Link from './Link';
-
 export { Link };

es/Link.js

@@ -1,11 +0,21 @@
-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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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; }
+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); } }
 
-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; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 import React from 'react';
@@ -26,7 +36,5 @@ import PropTypes from 'prop-types';
     cursor: disabled ? 'default' : 'pointer',
-
     '& svg': {
       fill: 'currentColor'
     },
-
     '&:hover': {
@@ -38,3 +46,2 @@ color: disabled ? theme.colors.gray[4] : theme.colors.orange[6],
     },
-
     '&:active': {
@@ -50,6 +57,10 @@ color: theme.colors.orange[7],
 
-var Link = function (_React$Component) {
+var Link =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(Link, _React$Component);
 
   function Link(props, context) {
+    var _this;
+
     _classCallCheck(this, Link);
@@ -61,6 +72,5 @@
 
-    var _this = _possibleConstructorReturn(this, (Link.__proto__ || Object.getPrototypeOf(Link)).call(this, props, context));
-
-    _this.handleClick = _this.handleClick.bind(_this);
-    _this.focus = _this.focus.bind(_this);
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Link).call(this, props, context));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.focus = _this.focus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     return _this;
@@ -70,3 +80,3 @@ }
   _createClass(Link, [{
-    key: 'focus',
+    key: "focus",
     value: function focus() {
@@ -76,3 +86,3 @@ this.link.focus();
   }, {
-    key: 'handleClick',
+    key: "handleClick",
     value: function handleClick(e) {
@@ -92,13 +102,13 @@ e.preventDefault();
   }, {
-    key: 'render',
+    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,
-          props = _objectWithoutProperties(_props, ['to', 'children', 'disabled', 'isActive', 'expandable']);
+      var _this$props = this.props,
+          to = _this$props.to,
+          children = _this$props.children,
+          disabled = _this$props.disabled,
+          isActive = _this$props.isActive,
+          expandable = _this$props.expandable,
+          props = _objectWithoutProperties(_this$props, ["to", "children", "disabled", "isActive", "expandable"]);
 
@@ -120,2 +130,3 @@ if (!props.href) {
       }
+
       props.onClick = this.handleClick;
@@ -127,8 +138,5 @@
 
-      return React.createElement(
-        'a',
-        props,
-        children,
-        expandable && React.createElement(ArrowSwivel, { isActive: isActive })
-      );
+      return React.createElement("a", props, children, expandable && React.createElement(ArrowSwivel, {
+        isActive: isActive
+      }));
     }
@@ -153,3 +161,2 @@ }]);
 Link.displayName = 'Link';
-
 export default createStyledComponent(linkStyles, Link);

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.Link = undefined;
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _Link.default;
+  }
+});
 
-var _Link = require('./Link');
+var _Link = _interopRequireDefault(require("./Link"));
 
-var _Link2 = _interopRequireDefault(_Link);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Link = _Link2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/Link.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,50 +6,74 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _react = require('react');
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _utilRouteHandler = require("@cloudflare/util-route-handler");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _styleContainer = require("@cloudflare/style-container");
 
-var _utilRouteHandler = require('@cloudflare/util-route-handler');
+var _componentArrowSwivel = require("@cloudflare/component-arrow-swivel");
 
-var _styleContainer = require('@cloudflare/style-container');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _componentArrowSwivel = require('@cloudflare/component-arrow-swivel');
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-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; }
+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.colors.gray[4] : theme.colors.blue[4],
-  textDecoration: 'none',
-  transition: 'all 150ms ease',
-  cursor: disabled ? 'default' : 'pointer',
+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); } }
 
-  '& svg': {
-    fill: 'currentColor'
-  },
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-  '&:hover': {
-    color: disabled ? theme.colors.gray[4] : theme.colors.orange[6],
-    '& svg': {
-      fill: 'currentColor'
-    }
-  },
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-  '&:active': {
-    color: theme.colors.orange[7],
-    outline: 'none',
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+var linkStyles = function linkStyles(_ref) {
+  var theme = _ref.theme,
+      disabled = _ref.disabled;
+  return {
+    display: 'inline-block',
+    color: disabled ? theme.colors.gray[4] : theme.colors.blue[4],
+    textDecoration: 'none',
+    transition: 'all 150ms ease',
+    cursor: disabled ? 'default' : 'pointer',
     '& svg': {
       fill: 'currentColor'
+    },
+    '&:hover': {
+      color: disabled ? theme.colors.gray[4] : theme.colors.orange[6],
+      '& svg': {
+        fill: 'currentColor'
+      }
+    },
+    '&:active': {
+      color: theme.colors.orange[7],
+      outline: 'none',
+      '& svg': {
+        fill: 'currentColor'
+      }
     }
-  }
-});
+  };
+};
 
-class Link extends _react2.default.Component {
-  constructor(props, context) {
+var Link =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(Link, _React$Component);
+
+  function Link(props, context) {
+    var _this;
+
+    _classCallCheck(this, Link);
+
     if (!props.to && !props.onClick) {
@@ -59,78 +83,88 @@ throw new Error('<Link/> requires either a `to` or `onClick` prop');
 
-    super(props, context);
-
-    this.handleClick = this.handleClick.bind(this);
-    this.focus = this.focus.bind(this);
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Link).call(this, props, context));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.focus = _this.focus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
   }
 
-  focus() {
-    this.link.focus();
-  }
+  _createClass(Link, [{
+    key: "focus",
+    value: function focus() {
+      this.link.focus();
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(e) {
+      e.preventDefault();
 
-  handleClick(e) {
-    e.preventDefault();
+      if (this.props.disabled) {
+        return;
+      }
 
-    if (this.props.disabled) {
-      return;
+      if (this.props.to) {
+        (0, _utilRouteHandler.routeTo)(this.props.to);
+      } else {
+        this.props.onClick(e);
+      }
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
 
-    if (this.props.to) {
-      (0, _utilRouteHandler.routeTo)(this.props.to);
-    } else {
-      this.props.onClick(e);
-    }
-  }
+      var _this$props = this.props,
+          to = _this$props.to,
+          children = _this$props.children,
+          disabled = _this$props.disabled,
+          isActive = _this$props.isActive,
+          expandable = _this$props.expandable,
+          props = _objectWithoutProperties(_this$props, ["to", "children", "disabled", "isActive", "expandable"]);
 
-  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;
+      if (disabled) {
+        props.disabled = true;
+      }
+
+      props.onClick = this.handleClick;
+
+      props.ref = function (node) {
+        return _this2.link = node;
+      };
+
+      return _react.default.createElement("a", props, children, expandable && _react.default.createElement(_componentArrowSwivel.ArrowSwivel, {
+        isActive: isActive
+      }));
     }
-    props.onClick = this.handleClick;
+  }]);
 
-    props.ref = node => this.link = node;
+  return Link;
+}(_react.default.Component);
 
-    return _react2.default.createElement(
-      'a',
-      props,
-      children,
-      expandable && _react2.default.createElement(_componentArrowSwivel.ArrowSwivel, { isActive: isActive })
-    );
-  }
-}
-
 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.default.string,
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  role: _propTypes.default.string,
+  expandable: _propTypes.default.bool,
+  isActive: _propTypes.default.bool
 };
 Link.displayName = 'Link';
 
-exports.default = (0, _styleContainer.createStyledComponent)(linkStyles, Link);
+var _default = (0, _styleContainer.createStyledComponent)(linkStyles, Link);
+
+exports.default = _default;

package.json

 {
   "name": "@cloudflare/component-link",
   "description": "Cloudflare Link Component",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "main": "lib/index.js",
@@ -18,4 +18,4 @@ "module": "es/index.js",
   "dependencies": {
-    "@cloudflare/component-arrow-swivel": "^1.0.20",
-    "@cloudflare/style-container": "^2.0.3",
+    "@cloudflare/component-arrow-swivel": "^1.0.21",
+    "@cloudflare/style-container": "^3.0.0",
     "@cloudflare/util-route-handler": "^1.0.8",
@@ -22,0 +22,0 @@ "prop-types": "^15.6.0"

README.md

@@ -6,8 +6,7 @@ # @cloudflare/component-link
 ## Installation
+
 Installation with yarn is recommended
 
 ```sh
-
 $ yarn add @cloudflare/component-link
-
 ```
@@ -56,2 +55,7 @@
 
+        <p>Links can be disabled:</p>
+        <Link disabled to="/foo">
+          Link to /foo
+        </Link>
+
         <p>You can create an expandable link by giving it an expandable prop</p>
@@ -71,5 +75,2 @@ <Link
 export default LinkComponent;
-
 ```
-
-

No alert changes

Improved metrics

Total package byte prevSize

34531

increased by17.44%

Lines of code

374

increased by12.31%

Number of lines in readme file

74

increased by1.37%

Dependency changes

• - Removed@cloudflare/style-const@1.0.12(transitive)

• - Removed@cloudflare/style-container@2.0.3(transitive)

• Updated@cloudflare/component-arrow-swivel@^1.0.21

• Updated@cloudflare/style-container@^3.0.0