cf-component-card - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/cloudflare/cf-ui/compare/cf-component-card@3.0.4...cf-component-card@3.1.0) (2017-09-21)
+
+
+### Bug Fixes
+
+* **cf-component-card:** use role link when is not expandable, clean up exmaple ([1127f34](https://github.com/cloudflare/cf-ui/commit/1127f34))
+
+
+### Features
+
+* **cf-component-card:** allow non expandable toolbar links ([8e35164](https://github.com/cloudflare/cf-ui/commit/8e35164))
+
+
+
+
 <a name="3.0.4"></a>
@@ -8,0 +24,0 @@ ## [3.0.4](https://github.com/cloudflare/cf-ui/compare/cf-component-card@3.0.3...cf-component-card@3.0.4) (2017-09-15)

es/CardDrawers.js

@@ -78,3 +78,4 @@ 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; }; }();
               return _this2.handleLinkClick(drawer.id);
-            }
+            },
+            expandable: true
           },
@@ -81,0 +82,0 @@ drawer.name

es/CardToolbarLink.js

@@ -16,2 +16,3 @@ 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 isActive = _ref.isActive,
+      expandable = _ref.expandable,
       theme = _ref.theme;
@@ -24,3 +25,3 @@ return {
 
-    '&::after': {
+    '&::after': expandable ? {
       content: "'\\f003'",
@@ -37,3 +38,3 @@ fontFamily: '"cloudflare-font"',
       transform: isActive ? 'rotate(90deg)' : 'initial'
-    }
+    } : {}
   };
@@ -63,11 +64,19 @@ };
     value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          className = _props.className,
+          to = _props.to,
+          children = _props.children,
+          expandable = _props.expandable;
+
       return React.createElement(
         Link,
         {
-          role: 'tab',
-          id: this.props.id,
-          className: this.props.className,
+          role: expandable ? 'tab' : 'link',
+          id: id,
+          className: className,
+          to: to,
           onClick: this.handleClick
         },
-        this.props.children
+        children
       );
@@ -82,8 +91,14 @@ }
   className: PropTypes.string,
+  to: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
   id: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  expandable: PropTypes.bool
 };
 
-export default createComponent(styles, CardToolbarLink, ['isActive']);
+CardToolbarLink.defaultProps = {
+  expandable: true
+};
+
+export default createComponent(styles, CardToolbarLink, ['isActive', 'expandable', 'to']);

es/index.js

@@ -21,3 +21,4 @@ import { applyTheme } from 'cf-style-container';
 import CardFooterTheme from './CardFooterTheme';
-
+import CardToolbar from './CardToolbar';
+import CardToolbarLink from './CardToolbarLink';
 import CardPropTypes from './CardPropTypes';
@@ -35,2 +36,2 @@
 
-export { Card, CardUnstyled, CardTheme, CardContent, CardContentUnstyled, CardContentTheme, CardControl, CardControlUnstyled, CardControlTheme, CardDrawers, CardDrawersUnstyled, CardDrawersTheme, CardMessages, CardMessagesUnstyled, CardMessagesTheme, CardPropTypes, CardSection, CardSectionUnstyled, CardSectionTheme, CardBlock, CardBlockUnstyled, CardBlockTheme, CardTitle, CardTitleUnstyled, CardTitleTheme, CardFooter, CardFooterUnstyled, CardFooterTheme };
+export { Card, CardUnstyled, CardTheme, CardContent, CardContentUnstyled, CardContentTheme, CardControl, CardControlUnstyled, CardControlTheme, CardDrawers, CardDrawersUnstyled, CardDrawersTheme, CardMessages, CardMessagesUnstyled, CardMessagesTheme, CardPropTypes, CardSection, CardSectionUnstyled, CardSectionTheme, CardBlock, CardBlockUnstyled, CardBlockTheme, CardTitle, CardTitleUnstyled, CardTitleTheme, CardFooter, CardFooterUnstyled, CardFooterTheme, CardToolbar, CardToolbarLink };

lib/CardDrawers.js

@@ -103,3 +103,4 @@ 'use strict';
               return _this2.handleLinkClick(drawer.id);
-            }
+            },
+            expandable: true
           },
@@ -106,0 +107,0 @@ drawer.name

lib/CardToolbarLink.js

@@ -33,2 +33,3 @@ 'use strict';
   var isActive = _ref.isActive,
+      expandable = _ref.expandable,
       theme = _ref.theme;
@@ -41,3 +42,3 @@ return {
 
-    '&::after': {
+    '&::after': expandable ? {
       content: "'\\f003'",
@@ -54,3 +55,3 @@ fontFamily: '"cloudflare-font"',
       transform: isActive ? 'rotate(90deg)' : 'initial'
-    }
+    } : {}
   };
@@ -80,11 +81,19 @@ };
     value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          className = _props.className,
+          to = _props.to,
+          children = _props.children,
+          expandable = _props.expandable;
+
       return _react2.default.createElement(
         _cfComponentLink2.default,
         {
-          role: 'tab',
-          id: this.props.id,
-          className: this.props.className,
+          role: expandable ? 'tab' : 'link',
+          id: id,
+          className: className,
+          to: to,
           onClick: this.handleClick
         },
-        this.props.children
+        children
       );
@@ -99,8 +108,14 @@ }
   className: _propTypes2.default.string,
+  to: _propTypes2.default.string,
   onClick: _propTypes2.default.func.isRequired,
   isActive: _propTypes2.default.bool.isRequired,
   id: _propTypes2.default.string,
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  expandable: _propTypes2.default.bool
 };
 
-exports.default = (0, _cfStyleContainer.createComponent)(styles, CardToolbarLink, ['isActive']);
+CardToolbarLink.defaultProps = {
+  expandable: true
+};
+
+exports.default = (0, _cfStyleContainer.createComponent)(styles, CardToolbarLink, ['isActive', 'expandable', 'to']);

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.CardFooterTheme = exports.CardFooterUnstyled = exports.CardFooter = exports.CardTitleTheme = exports.CardTitleUnstyled = exports.CardTitle = exports.CardBlockTheme = exports.CardBlockUnstyled = exports.CardBlock = exports.CardSectionTheme = exports.CardSectionUnstyled = exports.CardSection = exports.CardPropTypes = exports.CardMessagesTheme = exports.CardMessagesUnstyled = exports.CardMessages = exports.CardDrawersTheme = exports.CardDrawersUnstyled = exports.CardDrawers = exports.CardControlTheme = exports.CardControlUnstyled = exports.CardControl = exports.CardContentTheme = exports.CardContentUnstyled = exports.CardContent = exports.CardTheme = exports.CardUnstyled = exports.Card = undefined;
+exports.CardToolbarLink = exports.CardToolbar = exports.CardFooterTheme = exports.CardFooterUnstyled = exports.CardFooter = exports.CardTitleTheme = exports.CardTitleUnstyled = exports.CardTitle = exports.CardBlockTheme = exports.CardBlockUnstyled = exports.CardBlock = exports.CardSectionTheme = exports.CardSectionUnstyled = exports.CardSection = exports.CardPropTypes = exports.CardMessagesTheme = exports.CardMessagesUnstyled = exports.CardMessages = exports.CardDrawersTheme = exports.CardDrawersUnstyled = exports.CardDrawers = exports.CardControlTheme = exports.CardControlUnstyled = exports.CardControl = exports.CardContentTheme = exports.CardContentUnstyled = exports.CardContent = exports.CardTheme = exports.CardUnstyled = exports.Card = undefined;
 
@@ -83,2 +83,10 @@ var _cfStyleContainer = require('cf-style-container');
 
+var _CardToolbar = require('./CardToolbar');
+
+var _CardToolbar2 = _interopRequireDefault(_CardToolbar);
+
+var _CardToolbarLink = require('./CardToolbarLink');
+
+var _CardToolbarLink2 = _interopRequireDefault(_CardToolbarLink);
+
 var _CardPropTypes = require('./CardPropTypes');
@@ -127,2 +135,4 @@
 exports.CardFooterUnstyled = _CardFooter2.default;
-exports.CardFooterTheme = _CardFooterTheme2.default;
+exports.CardFooterTheme = _CardFooterTheme2.default;
+exports.CardToolbar = _CardToolbar2.default;
+exports.CardToolbarLink = _CardToolbarLink2.default;

package.json

 {
   "name": "cf-component-card",
   "description": "Cloudflare Card Component",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "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

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

57661

increased by3.23%

Lines of code

1297

increased by2.85%

No dependency changes