cf-component-button - npm Package Compare versions

Comparing version 4.0.0 to 4.3.1

lib/Button.js

@@ -27,28 +27,85 @@ 'use strict';
 
+var getOpacity = function getOpacity(props) {
+  if (props.loading) {
+    return 0.8;
+  }
+  if (props.disabled) {
+    return 0.5;
+  }
+  return 'inherit';
+};
+
+var getLoadingBefore = function getLoadingBefore(fadeZoomIn, loading) {
+  if (!loading) {
+    return null;
+  }
+  // this needs something better (e.g. a rotating icon)
+  return {
+    '&::before': {
+      content: '"…"',
+      color: 'black',
+      display: 'block',
+      position: 'absolute',
+      top: '0.6em',
+      left: 0,
+      height: '100%',
+      width: '100%',
+      opacity: 1
+    }
+  };
+};
+
 var styles = function styles(props) {
   var theme = props.theme;
   return Object.assign({
-    font: theme.font,
+    '&:hover': {
+      backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'HoverBackground'],
+      borderColor: theme[props.type + 'HoverBorder'],
+      color: props.loading ? theme.disabledBackground : theme[props.type + 'HoverColor']
+    },
+    '&:active': {
+      backgroundColor: theme[props.type + 'ActiveBackground'],
+      borderColor: theme[props.type + 'ActiveBorder'],
+      color: theme[props.type + 'ActiveColor']
+    },
+    '&:focus': {
+      backgroundColor: props.loading ? theme.backgroundColor : theme[props.type + 'Background'],
+      boxShadow: 'inset 0px 0px 0px ' + theme.borderSize + ' ' + theme[props.type + 'focusOutlineColor'],
+      color: props.loading ? theme.disabledBackground : theme[props.type + 'FocusColor'],
+      outline: props.loading ? 'none' : 'inherit'
+    },
+    '&[title]': {
+      pointerEvents: props.disabled ? 'auto' : 'none'
+    },
+    backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'Background'],
+    borderBottom: theme.borderBottom,
+    borderBottomWidth: theme.borderBottomWidth,
+    borderColor: theme[props.type + 'Border'],
+    borderLeft: props.group && props.group !== 'first' ? 0 : theme.borderLeft,
+    borderRight: theme.borderRight,
+    borderStyle: theme.borderStyle,
+    borderTop: theme.borderTop,
+    borderWidth: theme.borderWidth,
+    color: props.loading ? theme.disabledBackground : theme[props.type + 'Color'],
+    cursor: props.disabled || props.loading ? 'default' : theme.cursor,
+    display: theme.display,
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSize,
     fontWeight: theme.fontWeight,
-    borderTop: theme.border,
-    borderLeft: props.group && props.group !== 'first' ? 0 : theme.border,
-    borderRight: theme.border,
-    borderBottom: theme.border,
-    paddingTop: theme.paddingTop,
-    paddingRight: theme.paddingRight,
+    lineHeight: theme.lineHeight,
+    marginBottom: props.group ? 0 : theme.marginBottom,
+    marginLeft: props.group ? 0 : theme.marginLeft,
+    marginRight: props.group ? 0 : theme.marginRight,
+    marginTop: props.group ? 0 : theme.marginTop,
+    opacity: getOpacity(props),
     paddingBottom: theme.paddingBottom,
     paddingLeft: theme.paddingLeft,
-    marginTop: props.group ? 0 : theme.marginTop,
-    marginRight: props.group ? 0 : theme.marginRight,
-    marginBottom: props.group ? 0 : theme.marginBottom,
-    marginLeft: props.group ? 0 : theme.marginLeft,
-    cursor: theme.cursor,
-    color: theme.color,
-    borderWidth: theme.borderWidth,
-    borderStyle: theme.borderStyle,
-    borderColor: theme.borderColor,
-    borderBottomWidth: theme.borderBottomWidth,
-    boxShadow: theme.boxShadow,
-    background: theme['background' + (props.type.charAt(0).toUpperCase() + props.type.slice(1))]
-  }, getRadius(theme.borderRadius, props.group));
+    paddingRight: theme.paddingRight,
+    paddingTop: theme.paddingTop,
+    pointerEvents: props.disabled ? 'none' : 'auto',
+    position: theme.position,
+    textAlign: theme.textAlign,
+    transition: theme.transition,
+    userSelect: theme.userSelect
+  }, getRadius(theme.borderRadius, props.group), getLoadingBefore(theme.fadeZoomIn, props.loading));
 };
@@ -91,2 +148,4 @@
 
+Button.displayName = 'Button';
+
 exports.default = (0, _cfStyleContainer.createComponent)(styles, Button);

lib/ButtonGroup.js

@@ -19,3 +19,5 @@ 'use strict';
     display: theme.display,
-    position: theme.position
+    position: theme.position,
+    verticalAlign: theme.verticalAlign,
+    whiteSpace: theme.whiteSpace
   };
@@ -36,5 +38,8 @@ };
   return _react2.default.Children.map(children, function (child, index) {
-    return _react2.default.cloneElement(child, {
-      group: getGroupByIndex(index, _react2.default.Children.count(children))
-    });
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        group: getGroupByIndex(index, _react2.default.Children.count(children))
+      });
+    }
+    return child;
   });
@@ -41,0 +46,0 @@ };

lib/ButtonGroupTheme.js

@@ -6,5 +6,10 @@ 'use strict';
 });
-exports.default = {
-  display: 'inline-block',
-  position: 'relative'
+
+exports.default = function () {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap'
+  };
 };

lib/ButtonTheme.js

@@ -6,27 +6,124 @@ 'use strict';
 });
-exports.default = {
-  font: 'inherit',
-  fontWeight: 700,
-  border: 'none',
-  borderRadius: '3px',
-  paddingTop: '.5em',
-  paddingRight: '1em',
-  paddingBottom: '.5em',
-  paddingLeft: '1em',
-  marginTop: 0,
-  marginRight: '.2em',
-  marginBottom: '.2em',
-  marginLeft: 0,
-  cursor: 'pointer',
-  color: '#fff',
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'rgba(0, 0, 0, .2)',
-  borderBottomWidth: '3px',
-  boxShadow: '0 1px 2px rgba(0, 0, 0, .1)',
-  backgroundDefault: 'gray',
-  backgroundPrimary: '#00a9eb',
-  backgroundSuccess: '#68970f',
-  backgroundWarning: '#fca520',
-  backgroundDanger: '#ff3100'
+
+var _cfStyleContainer = require('cf-style-container');
+
+var _cfStyleConst = require('cf-style-const');
+
+exports.default = function (baseTheme) {
+  (0, _cfStyleConst.checkBaseTheme)(baseTheme, 'ButtonTheme');
+  var defaultBorder = (0, _cfStyleContainer.color)(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var primaryBorder = (0, _cfStyleContainer.color)(baseTheme.colorBlue + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var successBorder = (0, _cfStyleContainer.color)(baseTheme.colorGreen + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var warningBorder = (0, _cfStyleContainer.color)(baseTheme.colorOrange + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var dangerBorder = (0, _cfStyleContainer.color)(baseTheme.colorRed + '  lightness(' + baseTheme.colorOffsetDark + ')');
+  var defaultHoverBackground = (0, _cfStyleContainer.color)(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var defaultActiveBackground = (0, _cfStyleContainer.color)(defaultHoverBackground + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var primaryActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorBlueDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var successActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var warningActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var dangerActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorRedDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+
+  return {
+    fontSize: (parseFloat(baseTheme.fontSize) - 1) / parseFloat(baseTheme.fontSize) + 'rem',
+    fontWeight: baseTheme.weightNormal,
+    paddingTop: '0.6em',
+    paddingRight: '1em',
+    paddingBottom: '0.53em',
+    paddingLeft: '1em',
+    spacing: '0.4rem',
+    borderSize: '1px',
+    display: 'inline-block',
+    position: 'relative',
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    background: 'transparent',
+    lineHeight: 1.2,
+    textAlign: 'center',
+    webkitTextStroke: 0, // This makes white text in buttons hard to read, so removing it
+    webkitFontSmoothing: 'subpixel-antialiased',
+    userSelect: 'none',
+    cursor: 'pointer',
+    transition: 'all 200ms ease',
+    border: 'none',
+    borderLeft: 0,
+    borderBottom: '1px solid',
+    borderTop: 0,
+    borderRight: 0,
+
+    // Disabled
+    disabledBorder: (0, _cfStyleContainer.color)(baseTheme.disabledBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    disabledColor: (0, _cfStyleContainer.color)(baseTheme.disabledBackground + ' lightness(30%)'),
+
+    // Normal
+    defaultBackground: baseTheme.colorGrayLight,
+    primaryBackground: baseTheme.colorBlue,
+    successBackground: baseTheme.colorGreen,
+    warningBackground: baseTheme.colorOrange,
+    dangerBackground: baseTheme.colorRed,
+
+    defaultBorder: defaultBorder,
+    primaryBorder: primaryBorder,
+    successBorder: successBorder,
+    warningBorder: warningBorder,
+    dangerBorder: dangerBorder,
+
+    defaultColor: baseTheme.colorGrayDark,
+    primaryColor: baseTheme.colorWhite,
+    successColor: baseTheme.colorWhite,
+    warningColor: baseTheme.colorWhite,
+    dangerColor: baseTheme.colorWhite,
+
+    // Hover
+    defaultHoverBackground: defaultHoverBackground,
+    primaryHoverBackground: baseTheme.colorBlueDark,
+    successHoverBackground: baseTheme.colorGreenDark,
+    warningHoverBackground: baseTheme.colorOrangeDark,
+    dangerHoverBackground: baseTheme.colorRedDark,
+
+    defaultHoverBorder: (0, _cfStyleContainer.color)(defaultBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    primaryHoverBorder: (0, _cfStyleContainer.color)(primaryBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    successHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    warningHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    dangerHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorRedDark + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+
+    defaultHoverColor: baseTheme.colorGrayDark,
+    primaryHoverColor: baseTheme.colorWhite,
+    successHoverColor: baseTheme.colorWhite,
+    warningHoverColor: baseTheme.colorWhite,
+    dangerHoverColor: baseTheme.colorWhite,
+
+    // Active
+    defaultActiveBackground: defaultActiveBackground,
+    primaryActiveBackground: primaryActiveBackground,
+    successActiveBackground: successActiveBackground,
+    warningActiveBackground: warningActiveBackground,
+    dangerActiveBackground: dangerActiveBackground,
+
+    defaultActiveBorder: (0, _cfStyleContainer.color)(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    primaryActiveBorder: (0, _cfStyleContainer.color)(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    successActiveBorder: (0, _cfStyleContainer.color)(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    warningActiveBorder: (0, _cfStyleContainer.color)(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    dangerActiveBorder: (0, _cfStyleContainer.color)(dangerActiveBackground + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+
+    defaultActiveColor: baseTheme.colorGrayDark,
+    primaryActiveColor: baseTheme.colorWhite,
+    successActiveColor: baseTheme.colorWhite,
+    warningActiveColor: baseTheme.colorWhite,
+    dangerActiveColor: baseTheme.colorWhite,
+
+    // Focus
+    defaultFocusColor: baseTheme.colorGrayDark,
+    primaryFocusColor: baseTheme.colorWhite,
+    successFocusColor: baseTheme.colorWhite,
+    warningFocusColor: baseTheme.colorWhite,
+    dangerFocusColor: baseTheme.colorWhite,
+
+    defaultFocusOutlineColor: (0, _cfStyleContainer.color)(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    primaryFocusOutlineColor: (0, _cfStyleContainer.color)(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    successFocusOutlineColor: (0, _cfStyleContainer.color)(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    warningFocusOutlineColor: (0, _cfStyleContainer.color)(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
+    dangerFocusOutlineColor: (0, _cfStyleContainer.color)(dangerActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')')
+  };
 };

package.json

 {
   "name": "cf-component-button",
-  "description": "CloudFlare Button Component",
-  "version": "4.0.0",
+  "description": "Cloudflare Button Component",
+  "version": "4.3.1",
   "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "author": "James Kyle <[e-mail]>",
@@ -12,9 +14,8 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "cf-style-container": "^0.0.2",
-    "react": "^0.14.2 || ^15.0.0-0"
+    "cf-style-const": "^0.3.0",
+    "cf-style-container": "^0.2.0"
   },
-  "devDependencies": {
-    "assert-equal-jsx": "^1.0.0",
-    "react-dom": "^15.0.0-0"
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
   }
 }

README.md

 # cf-component-button
 
-> CloudFlare Button Component
+> Cloudflare Button Component
 
@@ -13,34 +13,30 @@ ## Installation
 
-```js
-const React = require('react');
-const {
-  ButtonGroup,
-  Button
-} = require('cf-component-button');
+```jsx
+import React from 'react';
+import { applyTheme } from 'cf-style-container';
+import {
+  ButtonGroup as ButtonGroupUnstyled,
+  Button as ButtonUnstyled,
+  ButtonTheme,
+  ButtonGroupTheme
+} from 'cf-component-button';
 
-export default class Application extends React.Component {
+const Button = applyTheme(ButtonUnstyled, ButtonTheme);
+const ButtonGroup = applyTheme(ButtonGroupUnstyled, ButtonGroupTheme);
 
-  handleButtonOneClick() {
-    // clicked...
-  };
+const ButtonComponent = () => (
+  <ButtonGroup>
+    <Button type="primary" onClick={() => console.log('Clicked One!')}>
+      Button One
+    </Button>
+    <Button type="default" onClick={() => console.log('Clicked Two!')}>
+      Button Two
+    </Button>
+    <Button type="success" onClick={() => console.log('Clicked Three!')}>
+      Button Three
+    </Button>
+  </ButtonGroup>
+);
 
-  handleButtonTwoClick() {
-    // clicked...
-  };
-
-  render() {
-    return (
-      <div>
-        <ButtonGroup>
-          <Button type="primary" onClick={this.handleButtonOneClick.bind(this)}>
-            Button One
-          </Button>
-          <Button type="primary" onClick={this.handleButtonTwoClick.bind(this)}>
-            Button Two
-          </Button>
-        </ButtonGroup>
-      </div>
-    );
-  }
-}
+export default ButtonComponent;
 ```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

51367

increased by620.43%

Dev dependency count

0

decreased by-100%

Number of package files

15

increased by87.5%

Lines of code

1039

increased by493.71%

Worsened metrics

Dependency count

3

increased by50%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

42

decreased by-8.7%

Dependency changes

• + Addedcf-style-const@^0.3.0

• + Addedcf-style-const@0.3.4(transitive)

• + Addedcf-style-container@0.2.3(transitive)

• + Addedpolished@1.9.3(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-fela@4.3.5(transitive)

• - Removedreact@^0.14.2 || ^15.0.0-0

• - Removedasap@2.0.6(transitive)

• - Removedcf-style-container@0.0.2(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedcf-style-container@^0.2.0