cf-component-card - npm Package Compare versions

Comparing version 3.1.3 to 3.1.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="3.1.4"></a>
+## [3.1.4](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-card@3.1.3...cf-component-card@3.1.4) (2017-09-28)
+
+
+### Bug Fixes
+
+* **cf-component-card:** UI-69 - Replace font icon caret with svg based from cf-component-icon ([6b328d9](http://stash.cfops.it:7999/www/cf-ux/commits/6b328d9))
+
+
+
+
 <a name="3.1.3"></a>
@@ -8,0 +19,0 @@ ## [3.1.3](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-card@3.1.2...cf-component-card@3.1.3) (2017-09-27)

es/CardToolbarLink.js

@@ -12,8 +12,7 @@ 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; }; }();
 import Link from 'cf-component-link';
+import { Icon } from 'cf-component-icon';
 import { createComponent } from 'cf-style-container';
 
 var styles = function styles(_ref) {
-  var isActive = _ref.isActive,
-      expandable = _ref.expandable,
-      theme = _ref.theme;
+  var theme = _ref.theme;
   return {
@@ -23,20 +22,17 @@ position: 'relative',
     padding: '0.73333rem 2em 0.73333rem 0.5rem',
-    lineHeight: theme.lineHeight,
-
-    '&::after': expandable ? {
-      content: "'\\f003'",
-      fontFamily: '"cloudflare-font"',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      marginTop: '-0.7em',
-
-      position: 'absolute',
-      top: '51%',
-      right: '1rem',
-      transition: 'transform 0.2s ease',
-      transform: isActive ? 'rotate(90deg)' : 'initial'
-    } : {}
+    lineHeight: theme.lineHeight
   };
 };
 
+var CaretIconWrapper = createComponent(function (_ref2) {
+  var downwards = _ref2.downwards;
+  return {
+    position: 'relative',
+    top: '0.1rem',
+    display: 'inline-block',
+    transform: downwards ? 'rotate(90deg)' : 'initial',
+    transition: 'transform 0.2s ease'
+  };
+}, 'span');
+
 var CardToolbarLink = function (_React$Component) {
@@ -68,3 +64,4 @@ _inherits(CardToolbarLink, _React$Component);
           children = _props.children,
-          expandable = _props.expandable;
+          expandable = _props.expandable,
+          isActive = _props.isActive;
 
@@ -80,3 +77,8 @@ return React.createElement(
         },
-        children
+        children,
+        expandable && React.createElement(
+          CaretIconWrapper,
+          { downwards: isActive },
+          React.createElement(Icon, { label: 'caret-right', type: 'caret-right', color: 'primary' })
+        )
       );
@@ -83,0 +85,0 @@ }

lib/CardToolbarLink.js

@@ -19,2 +19,4 @@ 'use strict';
 
+var _cfComponentIcon = require('cf-component-icon');
+
 var _cfStyleContainer = require('cf-style-container');
@@ -31,5 +33,3 @@
 var styles = function styles(_ref) {
-  var isActive = _ref.isActive,
-      expandable = _ref.expandable,
-      theme = _ref.theme;
+  var theme = _ref.theme;
   return {
@@ -39,20 +39,17 @@ position: 'relative',
     padding: '0.73333rem 2em 0.73333rem 0.5rem',
-    lineHeight: theme.lineHeight,
-
-    '&::after': expandable ? {
-      content: "'\\f003'",
-      fontFamily: '"cloudflare-font"',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      marginTop: '-0.7em',
-
-      position: 'absolute',
-      top: '51%',
-      right: '1rem',
-      transition: 'transform 0.2s ease',
-      transform: isActive ? 'rotate(90deg)' : 'initial'
-    } : {}
+    lineHeight: theme.lineHeight
   };
 };
 
+var CaretIconWrapper = (0, _cfStyleContainer.createComponent)(function (_ref2) {
+  var downwards = _ref2.downwards;
+  return {
+    position: 'relative',
+    top: '0.1rem',
+    display: 'inline-block',
+    transform: downwards ? 'rotate(90deg)' : 'initial',
+    transition: 'transform 0.2s ease'
+  };
+}, 'span');
+
 var CardToolbarLink = function (_React$Component) {
@@ -84,3 +81,4 @@ _inherits(CardToolbarLink, _React$Component);
           children = _props.children,
-          expandable = _props.expandable;
+          expandable = _props.expandable,
+          isActive = _props.isActive;
 
@@ -96,3 +94,8 @@ return _react2.default.createElement(
         },
-        children
+        children,
+        expandable && _react2.default.createElement(
+          CaretIconWrapper,
+          { downwards: isActive },
+          _react2.default.createElement(_cfComponentIcon.Icon, { label: 'caret-right', type: 'caret-right', color: 'primary' })
+        )
       );
@@ -99,0 +102,0 @@ }

package.json

 {
   "name": "cf-component-card",
   "description": "Cloudflare Card Component",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

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

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

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

Improved metrics

Total package byte prevSize

60571

increased by1.2%

Lines of code

1290

increased by0.47%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes