cf-component-button - npm Package Compare versions

Comparing version 6.0.0 to 6.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="6.1.0"></a>
+# [6.1.0](https://github.com/cloudflare/cf-ui/compare/cf-component-button@6.0.0...cf-component-button@6.1.0) (2017-08-25)
+
+
+### Features
+
+* **cf-component-button:** add 'dangerOutline' button type (#356) ([fc71718](https://github.com/cloudflare/cf-ui/commit/fc71718))
+
+
+
+
 <a name="6.0.0"></a>
@@ -8,0 +19,0 @@ # [6.0.0](https://github.com/cloudflare/cf-ui/compare/cf-component-button@5.9.1...cf-component-button@6.0.0) (2017-08-07)

es/Button.js

@@ -88,2 +88,17 @@ 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 border = function border(theme, group, type) {
+  var isOutlineButton = type === 'dangerOutline';
+  return isOutlineButton ? {
+    borderBottom: '1px solid',
+    borderLeft: '1px solid',
+    borderRight: '1px solid',
+    borderTop: '1px solid'
+  } : {
+    borderBottom: theme.borderBottom,
+    borderLeft: group && group !== 'first' ? 0 : theme.borderLeft,
+    borderRight: theme.borderRight,
+    borderTop: theme.borderTop
+  };
+};
+
 var styles = function styles(props) {
@@ -105,3 +120,3 @@ var _extends2;
     '&:focus': {
-      backgroundColor: props.loading ? theme.backgroundColor : theme[props.type + 'Background'],
+      backgroundColor: props.loading ? theme.backgroundColor : theme[props.type + 'FocusBackground'],
       boxShadow: 'inset 0px 0px 0px ' + theme.borderSize + ' ' + theme[props.type + 'focusOutlineColor'],
@@ -117,10 +132,5 @@ color: props.loading ? theme.disabledBackground : theme[props.type + 'FocusColor'],
     backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'Background'],
-    borderBottom: theme.borderBottom,
-    borderBottomWidth: theme.borderBottomWidth,
-    borderColor: props.loading ? theme.disabledBorder : theme[props.type + 'Border'],
-    borderLeft: props.group && props.group !== 'first' ? 0 : theme.borderLeft,
-    borderRight: theme.borderRight,
+    borderColor: props.loading ? theme.disabledBorder : theme[props.type + 'Border']
+  }, border(theme, props.group, props.type), {
     borderStyle: theme.borderStyle,
-    borderTop: theme.borderTop,
-    borderWidth: theme.borderWidth,
     color: props.loading ? theme.disabledBackground : theme[props.type + 'Color'],
@@ -195,3 +205,3 @@ cursor: props.disabled || props.loading ? 'default' : theme.cursor,
   group: PropTypes.oneOf(['first', 'inbetween', 'last']),
-  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger']).isRequired,
+  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'dangerOutline']).isRequired,
   disabled: PropTypes.bool,
@@ -198,0 +208,0 @@ loading: PropTypes.bool,

es/ButtonTheme.js

@@ -9,2 +9,3 @@ import { darken, lighten } from 'polished';
   var dangerBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorRed);
+
   var defaultHoverBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
@@ -58,2 +59,3 @@ var defaultActiveBackground = darken(baseTheme.colorOffsetDark, defaultHoverBackground);
     dangerBackground: baseTheme.colorRed,
+    dangerOutlineBackground: 'transparent',
 
@@ -65,2 +67,3 @@ defaultBorder: defaultBorder,
     dangerBorder: dangerBorder,
+    dangerOutlineBorder: baseTheme.color.apple,
 
@@ -72,2 +75,3 @@ defaultColor: baseTheme.colorGrayDark,
     dangerColor: baseTheme.colorWhite,
+    dangerOutlineColor: baseTheme.color.apple,
 
@@ -80,2 +84,3 @@ // Hover
     dangerHoverBackground: baseTheme.colorRedDark,
+    dangerOutlineHoverBackground: baseTheme.color.apple,
 
@@ -87,2 +92,3 @@ defaultHoverBorder: darken(baseTheme.colorOffsetDark, defaultBorder),
     dangerHoverBorder: darken(baseTheme.colorOffsetDark, baseTheme.colorRedDark),
+    dangerOutlineHoverBorder: baseTheme.color.cherry,
 
@@ -94,2 +100,3 @@ defaultHoverColor: baseTheme.colorGrayDark,
     dangerHoverColor: baseTheme.colorWhite,
+    dangerOutlineHoverColor: baseTheme.colorWhite,
 
@@ -102,2 +109,3 @@ // Active
     dangerActiveBackground: dangerActiveBackground,
+    dangerOutlineActiveBackground: baseTheme.color.cherry,
 
@@ -109,2 +117,3 @@ defaultActiveBorder: darken(baseTheme.colorOffsetDark, defaultActiveBackground),
     dangerActiveBorder: darken(baseTheme.colorOffsetDark, dangerActiveBackground),
+    dangerOutlineActiveBorder: baseTheme.color.cherry,
 
@@ -116,4 +125,12 @@ defaultActiveColor: baseTheme.colorGrayDark,
     dangerActiveColor: baseTheme.colorWhite,
+    dangerOutlineActiveColor: baseTheme.colorWhite,
 
     // Focus
+    defaultFocusBackground: baseTheme.colorGrayLight,
+    primaryFocusBackground: baseTheme.colorBlue,
+    successFocusBackground: baseTheme.colorGreen,
+    warningFocusBackground: baseTheme.colorOrange,
+    dangerFocusBackground: baseTheme.colorRed,
+    dangerOutlineFocusBackground: baseTheme.color.cherry,
+
     defaultFocusColor: baseTheme.colorGrayDark,
@@ -124,2 +141,3 @@ primaryFocusColor: baseTheme.colorWhite,
     dangerFocusColor: baseTheme.colorWhite,
+    dangerOutlineFocusColor: baseTheme.colorWhite,
 
@@ -130,4 +148,5 @@ defaultFocusOutlineColor: darken(baseTheme.colorOffsetDark, defaultActiveBackground),
     warningFocusOutlineColor: darken(baseTheme.colorOffsetDark, warningActiveBackground),
-    dangerFocusOutlineColor: darken(baseTheme.colorOffsetDark, dangerActiveBackground)
+    dangerFocusOutlineColor: darken(baseTheme.colorOffsetDark, dangerActiveBackground),
+    dangerOutlineFocusOutlineColor: 'transparent'
   };
 });

lib/Button.js

@@ -102,2 +102,17 @@ 'use strict';
 
+var border = function border(theme, group, type) {
+  var isOutlineButton = type === 'dangerOutline';
+  return isOutlineButton ? {
+    borderBottom: '1px solid',
+    borderLeft: '1px solid',
+    borderRight: '1px solid',
+    borderTop: '1px solid'
+  } : {
+    borderBottom: theme.borderBottom,
+    borderLeft: group && group !== 'first' ? 0 : theme.borderLeft,
+    borderRight: theme.borderRight,
+    borderTop: theme.borderTop
+  };
+};
+
 var styles = function styles(props) {
@@ -119,3 +134,3 @@ var _extends2;
     '&:focus': {
-      backgroundColor: props.loading ? theme.backgroundColor : theme[props.type + 'Background'],
+      backgroundColor: props.loading ? theme.backgroundColor : theme[props.type + 'FocusBackground'],
       boxShadow: 'inset 0px 0px 0px ' + theme.borderSize + ' ' + theme[props.type + 'focusOutlineColor'],
@@ -131,10 +146,5 @@ color: props.loading ? theme.disabledBackground : theme[props.type + 'FocusColor'],
     backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'Background'],
-    borderBottom: theme.borderBottom,
-    borderBottomWidth: theme.borderBottomWidth,
-    borderColor: props.loading ? theme.disabledBorder : theme[props.type + 'Border'],
-    borderLeft: props.group && props.group !== 'first' ? 0 : theme.borderLeft,
-    borderRight: theme.borderRight,
+    borderColor: props.loading ? theme.disabledBorder : theme[props.type + 'Border']
+  }, border(theme, props.group, props.type), {
     borderStyle: theme.borderStyle,
-    borderTop: theme.borderTop,
-    borderWidth: theme.borderWidth,
     color: props.loading ? theme.disabledBackground : theme[props.type + 'Color'],
@@ -209,3 +219,3 @@ cursor: props.disabled || props.loading ? 'default' : theme.cursor,
   group: _propTypes2.default.oneOf(['first', 'inbetween', 'last']),
-  type: _propTypes2.default.oneOf(['default', 'primary', 'success', 'warning', 'danger']).isRequired,
+  type: _propTypes2.default.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'dangerOutline']).isRequired,
   disabled: _propTypes2.default.bool,
@@ -212,0 +222,0 @@ loading: _propTypes2.default.bool,

lib/ButtonTheme.js

@@ -15,2 +15,3 @@ 'use strict';
   var dangerBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorRed);
+
   var defaultHoverBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
@@ -64,2 +65,3 @@ var defaultActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, defaultHoverBackground);
     dangerBackground: baseTheme.colorRed,
+    dangerOutlineBackground: 'transparent',
 
@@ -71,2 +73,3 @@ defaultBorder: defaultBorder,
     dangerBorder: dangerBorder,
+    dangerOutlineBorder: baseTheme.color.apple,
 
@@ -78,2 +81,3 @@ defaultColor: baseTheme.colorGrayDark,
     dangerColor: baseTheme.colorWhite,
+    dangerOutlineColor: baseTheme.color.apple,
 
@@ -86,2 +90,3 @@ // Hover
     dangerHoverBackground: baseTheme.colorRedDark,
+    dangerOutlineHoverBackground: baseTheme.color.apple,
 
@@ -93,2 +98,3 @@ defaultHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultBorder),
     dangerHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorRedDark),
+    dangerOutlineHoverBorder: baseTheme.color.cherry,
 
@@ -100,2 +106,3 @@ defaultHoverColor: baseTheme.colorGrayDark,
     dangerHoverColor: baseTheme.colorWhite,
+    dangerOutlineHoverColor: baseTheme.colorWhite,
 
@@ -108,2 +115,3 @@ // Active
     dangerActiveBackground: dangerActiveBackground,
+    dangerOutlineActiveBackground: baseTheme.color.cherry,
 
@@ -115,2 +123,3 @@ defaultActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultActiveBackground),
     dangerActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, dangerActiveBackground),
+    dangerOutlineActiveBorder: baseTheme.color.cherry,
 
@@ -122,4 +131,12 @@ defaultActiveColor: baseTheme.colorGrayDark,
     dangerActiveColor: baseTheme.colorWhite,
+    dangerOutlineActiveColor: baseTheme.colorWhite,
 
     // Focus
+    defaultFocusBackground: baseTheme.colorGrayLight,
+    primaryFocusBackground: baseTheme.colorBlue,
+    successFocusBackground: baseTheme.colorGreen,
+    warningFocusBackground: baseTheme.colorOrange,
+    dangerFocusBackground: baseTheme.colorRed,
+    dangerOutlineFocusBackground: baseTheme.color.cherry,
+
     defaultFocusColor: baseTheme.colorGrayDark,
@@ -130,2 +147,3 @@ primaryFocusColor: baseTheme.colorWhite,
     dangerFocusColor: baseTheme.colorWhite,
+    dangerOutlineFocusColor: baseTheme.colorWhite,
 
@@ -136,4 +154,5 @@ defaultFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultActiveBackground),
     warningFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, warningActiveBackground),
-    dangerFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, dangerActiveBackground)
+    dangerFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, dangerActiveBackground),
+    dangerOutlineFocusOutlineColor: 'transparent'
   };
 };

package.json

 {
   "name": "cf-component-button",
   "description": "Cloudflare Button Component",
-  "version": "6.0.0",
+  "version": "6.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

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

Total package byte prevSize

42887

increased by6.25%

Lines of code

837

increased by6.62%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes