cf-component-button - npm Package Compare versions

Comparing version 7.4.11 to 7.5.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="7.5.0"></a>
+# [7.5.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-button@7.4.11...cf-component-button@7.5.0) (2018-04-25)
+
+
+### Features
+
+* **cf-component-button:** UI-602 Rewrite cf-component-button code to be ([4461c12](http://stash.cfops.it:7999/www/cf-ux/commits/4461c12))
+
+
+
+
 <a name="7.4.11"></a>
@@ -8,0 +19,0 @@ ## [7.4.11](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-button@7.4.10...cf-component-button@7.4.11) (2018-04-24)

es/Button.js

@@ -11,4 +11,2 @@ 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React from 'react';
@@ -20,3 +18,8 @@ import PropTypes from 'prop-types';
 
-var radius = function radius(borderRadius, group, spaced) {
+var radius = function radius(props) {
+  var spaced = props.spaced,
+      group = props.group,
+      theme = props.theme;
+
+  var borderRadius = theme.borderRadius;
   if (spaced) {
@@ -36,17 +39,10 @@ return { borderRadius: borderRadius };
 
-var opacity = function opacity(loading, disabled) {
-  if (loading) {
-    return { opacity: 0.8 };
-  }
-  if (disabled) {
-    return { opacity: 0.5 };
-  }
-  return { opacity: 'inherit' };
+var opacity = function opacity(props) {
+  return {
+    opacity: props.loading || props.disabled ? 0.5 : 'inherit'
+  };
 };
 
-var before = function before(fadeZoomIn, loading) {
-  if (!loading) {
-    return null;
-  }
-  return {
+var before = function before(props) {
+  return props.loading ? {
     '&::before': {
@@ -69,38 +65,33 @@ content: '"…"',
     }
-  };
+  } : undefined;
 };
 
-var marginLeft = function marginLeft(_marginLeft, group, spaced, direction) {
-  if (!group || direction === 'column') {
-    return { marginLeft: _marginLeft };
-  }
-  if (spaced && group !== 'first') {
-    return { marginLeft: '0.4rem' };
-  }
-  return { marginLeft: 0 };
-};
+var margin = function margin(props) {
+  var theme = props.theme,
+      group = props.group,
+      spaced = props.spaced,
+      direction = props.direction;
 
-var marginTop = function marginTop(_marginTop, group, spaced, direction) {
-  if (!group || direction === 'row') {
-    return { marginTop: _marginTop };
-  }
-  if (spaced && direction === 'column' && group !== 'first') {
-    return { marginTop: '0.4rem' };
-  }
-  return { marginTop: 0 };
+  var marginTop = !group || direction === 'row' ? theme.marginTop : spaced && direction === 'column' && group !== 'first' ? '0.4rem' : 0;
+  var marginLeft = !group || direction === 'column' ? theme.marginLeft : spaced && group !== 'first' ? '0.4rem' : 0;
+
+  return {
+    marginTop: marginTop,
+    marginRight: group ? 0 : theme.marginRight,
+    marginBottom: group ? 0 : theme.marginBottom,
+    marginLeft: marginLeft
+  };
 };
 
-var border = function border(theme, group, type, loading, inverted) {
-  var borderColor = loading ? theme.disabledBorder : inverted ? theme.normal.borderColor.inverted[type] : theme.normal.borderColor[type];
-  return Object.assign(inverted ? {
+var border = function border(props) {
+  var theme = props.theme,
+      inverted = props.inverted,
+      group = props.group;
+
+  var borderColor = colorAccessor(theme.normal.borderColor, props);
+  return {
     borderBottomWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderTopWidth: 1
-  } : {
-    borderBottomWidth: 1,
-    borderLeftWidth: group && group !== 'first' ? 0 : 1,
-    borderRightWidth: 0,
-    borderTopWidth: 0
-  }, {
+    borderLeftWidth: inverted ? 1 : group && group !== 'first' ? 0 : 1,
+    borderRightWidth: inverted ? 1 : 0,
+    borderTopWidth: inverted ? 1 : 0,
     borderBottomStyle: 'solid',
@@ -114,54 +105,55 @@ borderTopStyle: 'solid',
     borderRightColor: borderColor
-  });
+  };
 };
 
-var styles = function styles(props) {
-  var _extends2;
+var colorAccessor = function colorAccessor(property, props) {
+  var inverted = props.inverted,
+      type = props.type;
 
-  var theme = props.theme;
-  var iconOnly = props.iconType && !props.children;
-  return _extends({
-    '&:hover': {
-      backgroundColor: props.loading ? theme.disabledBackground : props.inverted ? theme.hover.backgroundColor.inverted[props.type] : theme.hover.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.hover.borderColor.inverted[props.type] : theme.hover.borderColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.hover.color.inverted[props.type] : theme.hover.color[props.type]
-    },
+  return !property ? undefined : inverted ? property.inverted[type] : property[type];
+};
 
-    '&:active': {
-      backgroundColor: props.inverted ? theme.active.backgroundColor.inverted[props.type] : theme.active.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.active.borderColor.inverted[props.type] : theme.active.borderColor[props.type],
-      color: props.inverted ? theme.active.color.inverted[props.type] : theme.active.color[props.type]
-    },
+var interactionStyleAccessor = function interactionStyleAccessor(interactionState, props) {
+  var theme = props.theme,
+      loading = props.loading,
+      disabled = props.disabled;
 
-    '&:focus': {
-      backgroundColor: props.loading ? theme.backgroundColor : props.inverted ? theme.focus.backgroundColor.inverted[props.type] : theme.focus.backgroundColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.focus.color.inverted[props.type] : theme.focus.color[props.type],
-      outline: props.loading ? 'none' : undefined,
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.normal.borderColor.inverted[props.type] : theme.normal.borderColor[props.type]
-    },
+  var isInteractive = !(loading || disabled);
+  var stateStyles = theme[interactionState];
 
-    '&:focus:hover': {
-      backgroundColor: props.loading ? theme.backgroundColor : props.inverted ? theme.focus.backgroundColor.inverted[props.type] : theme.focus.backgroundColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.focus.color.inverted[props.type] : theme.focus.color[props.type],
-      outline: props.loading ? 'none' : undefined,
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.normal.borderColor.inverted[props.type] : theme.normal.borderColor[props.type]
-    },
+  return isInteractive ? {
+    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
+    borderColor: colorAccessor(stateStyles.borderColor, props),
+    color: colorAccessor(stateStyles.color, props)
+  } : undefined;
+};
 
-    '&:active:hover': {
-      backgroundColor: props.inverted ? theme.active.backgroundColor.inverted[props.type] : theme.active.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.active.borderColor.inverted[props.type] : theme.active.borderColor[props.type],
-      color: props.inverted ? theme.active.color.inverted[props.type] : theme.active.color[props.type]
-    }
+var styles = function styles(props) {
+  var theme = props.theme,
+      iconType = props.iconType,
+      children = props.children,
+      loading = props.loading,
+      disabled = props.disabled,
+      direction = props.direction;
 
-  }, before(theme.fadeZoomIn, props.loading), {
+  var iconOnly = iconType && !children;
+  var normalStyles = theme.normal;
+  var backgroundColor = colorAccessor(normalStyles.backgroundColor, props);
+  var color = colorAccessor(normalStyles.color, props);
+
+  return _extends({
+    '&:hover': interactionStyleAccessor('hover', props),
+    '&:active': interactionStyleAccessor('active', props),
+    '&:focus': interactionStyleAccessor('focus', props),
+    '&:focus:hover': interactionStyleAccessor('focus', props),
+    '&:active:hover': interactionStyleAccessor('active', props),
+
     '&[title]': {
-      pointerEvents: props.disabled ? 'auto' : 'none'
+      pointerEvents: disabled ? 'auto' : 'none'
     },
 
-    backgroundColor: props.loading ? theme.disabledBackground : props.inverted ? theme.normal.backgroundColor.inverted[props.type] : theme.normal.backgroundColor[props.type]
+    backgroundColor: backgroundColor,
+    color: loading ? backgroundColor : color,
 
-  }, border(theme, props.group, props.type, props.loading, props.inverted), {
-    color: props.loading ? theme.disabledBackground : props.inverted ? theme.normal.color.inverted[props.type] : theme.normal.color[props.type],
-
-    cursor: props.disabled || props.loading ? 'default' : theme.cursor,
+    cursor: disabled || loading ? 'default' : theme.cursor,
     display: theme.display,
@@ -172,8 +164,5 @@
     fontWeight: theme.fontWeight,
-    lineHeight: theme.lineHeight,
+    lineHeight: theme.lineHeight
 
-    marginBottom: props.group ? 0 : theme.marginBottom,
-    marginRight: props.group ? 0 : theme.marginRight,
-    marginTop: props.group ? 0 : theme.marginTop
-  }, marginTop(theme.marginTop, props.group, props.spaced, props.direction), marginLeft(theme.marginLeft, props.group, props.spaced, props.direction), opacity(props.loading, props.disabled), {
+  }, before(props), border(props), margin(props), opacity(props), radius(props), {
 
@@ -185,5 +174,4 @@ paddingBottom: iconOnly ? '5px' : theme.paddingBottom,
 
-    pointerEvents: props.disabled ? 'none' : 'auto',
-    position: theme.position
-  }, radius(theme.borderRadius, props.group, props.spaced), (_extends2 = {
+    pointerEvents: disabled ? 'none' : 'auto',
+    position: theme.position,
 
@@ -197,5 +185,6 @@ textAlign: theme.textAlign,
     userSelect: theme.userSelect,
+    maxWidth: theme.maxWidth,
     float: theme.float,
-    maxWidth: theme.maxWidth
-  }, _defineProperty(_extends2, 'float', theme.float), _defineProperty(_extends2, 'width', props.direction === 'column' ? '100%' : 'auto'), _extends2));
+    width: direction === 'column' ? '100%' : 'auto'
+  });
 };
@@ -291,3 +280,5 @@
   submit: false,
-  loading: false
+  loading: false,
+  inverted: false,
+  type: 'default'
 };
@@ -294,0 +285,0 @@

lib/Button.js

@@ -25,3 +25,5 @@ 'use strict';
 
-const radius = (borderRadius, group, spaced) => {
+const radius = props => {
+  const { spaced, group, theme } = props;
+  const borderRadius = theme.borderRadius;
   if (spaced) {
@@ -41,17 +43,8 @@ return { borderRadius };
 
-const opacity = (loading, disabled) => {
-  if (loading) {
-    return { opacity: 0.8 };
-  }
-  if (disabled) {
-    return { opacity: 0.5 };
-  }
-  return { opacity: 'inherit' };
-};
+const opacity = props => ({
+  opacity: props.loading || props.disabled ? 0.5 : 'inherit'
+});
 
-const before = (fadeZoomIn, loading) => {
-  if (!loading) {
-    return null;
-  }
-  return {
+const before = props => {
+  return props.loading ? {
     '&::before': {
@@ -74,38 +67,26 @@ content: '"…"',
     }
-  };
+  } : undefined;
 };
 
-const marginLeft = (marginLeft, group, spaced, direction) => {
-  if (!group || direction === 'column') {
-    return { marginLeft };
-  }
-  if (spaced && group !== 'first') {
-    return { marginLeft: '0.4rem' };
-  }
-  return { marginLeft: 0 };
-};
+const margin = props => {
+  const { theme, group, spaced, direction } = props;
+  const marginTop = !group || direction === 'row' ? theme.marginTop : spaced && direction === 'column' && group !== 'first' ? '0.4rem' : 0;
+  const marginLeft = !group || direction === 'column' ? theme.marginLeft : spaced && group !== 'first' ? '0.4rem' : 0;
 
-const marginTop = (marginTop, group, spaced, direction) => {
-  if (!group || direction === 'row') {
-    return { marginTop };
-  }
-  if (spaced && direction === 'column' && group !== 'first') {
-    return { marginTop: '0.4rem' };
-  }
-  return { marginTop: 0 };
+  return {
+    marginTop: marginTop,
+    marginRight: group ? 0 : theme.marginRight,
+    marginBottom: group ? 0 : theme.marginBottom,
+    marginLeft: marginLeft
+  };
 };
 
-const border = (theme, group, type, loading, inverted) => {
-  const borderColor = loading ? theme.disabledBorder : inverted ? theme.normal.borderColor.inverted[type] : theme.normal.borderColor[type];
-  return Object.assign(inverted ? {
+const border = props => {
+  const { theme, inverted, group } = props;
+  const borderColor = colorAccessor(theme.normal.borderColor, props);
+  return {
     borderBottomWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderTopWidth: 1
-  } : {
-    borderBottomWidth: 1,
-    borderLeftWidth: group && group !== 'first' ? 0 : 1,
-    borderRightWidth: 0,
-    borderTopWidth: 0
-  }, {
+    borderLeftWidth: inverted ? 1 : group && group !== 'first' ? 0 : 1,
+    borderRightWidth: inverted ? 1 : 0,
+    borderTopWidth: inverted ? 1 : 0,
     borderBottomStyle: 'solid',
@@ -119,52 +100,44 @@ borderTopStyle: 'solid',
     borderRightColor: borderColor
-  });
+  };
 };
 
-const styles = props => {
-  const theme = props.theme;
-  const iconOnly = props.iconType && !props.children;
-  return _extends({
-    '&:hover': {
-      backgroundColor: props.loading ? theme.disabledBackground : props.inverted ? theme.hover.backgroundColor.inverted[props.type] : theme.hover.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.hover.borderColor.inverted[props.type] : theme.hover.borderColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.hover.color.inverted[props.type] : theme.hover.color[props.type]
-    },
+const colorAccessor = (property, props) => {
+  const { inverted, type } = props;
+  return !property ? undefined : inverted ? property.inverted[type] : property[type];
+};
 
-    '&:active': {
-      backgroundColor: props.inverted ? theme.active.backgroundColor.inverted[props.type] : theme.active.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.active.borderColor.inverted[props.type] : theme.active.borderColor[props.type],
-      color: props.inverted ? theme.active.color.inverted[props.type] : theme.active.color[props.type]
-    },
+const interactionStyleAccessor = (interactionState, props) => {
+  const { theme, loading, disabled } = props;
+  const isInteractive = !(loading || disabled);
+  const stateStyles = theme[interactionState];
 
-    '&:focus': {
-      backgroundColor: props.loading ? theme.backgroundColor : props.inverted ? theme.focus.backgroundColor.inverted[props.type] : theme.focus.backgroundColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.focus.color.inverted[props.type] : theme.focus.color[props.type],
-      outline: props.loading ? 'none' : undefined,
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.normal.borderColor.inverted[props.type] : theme.normal.borderColor[props.type]
-    },
+  return isInteractive ? {
+    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
+    borderColor: colorAccessor(stateStyles.borderColor, props),
+    color: colorAccessor(stateStyles.color, props)
+  } : undefined;
+};
 
-    '&:focus:hover': {
-      backgroundColor: props.loading ? theme.backgroundColor : props.inverted ? theme.focus.backgroundColor.inverted[props.type] : theme.focus.backgroundColor[props.type],
-      color: props.loading ? theme.disabledBackground : props.inverted ? theme.focus.color.inverted[props.type] : theme.focus.color[props.type],
-      outline: props.loading ? 'none' : undefined,
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.normal.borderColor.inverted[props.type] : theme.normal.borderColor[props.type]
-    },
+const styles = props => {
+  const { theme, iconType, children, loading, disabled, direction } = props;
+  const iconOnly = iconType && !children;
+  const normalStyles = theme.normal;
+  const backgroundColor = colorAccessor(normalStyles.backgroundColor, props);
+  const color = colorAccessor(normalStyles.color, props);
 
-    '&:active:hover': {
-      backgroundColor: props.inverted ? theme.active.backgroundColor.inverted[props.type] : theme.active.backgroundColor[props.type],
-      borderColor: props.loading ? theme.disabledBorder : props.inverted ? theme.active.borderColor.inverted[props.type] : theme.active.borderColor[props.type],
-      color: props.inverted ? theme.active.color.inverted[props.type] : theme.active.color[props.type]
-    }
+  return _extends({
+    '&:hover': interactionStyleAccessor('hover', props),
+    '&:active': interactionStyleAccessor('active', props),
+    '&:focus': interactionStyleAccessor('focus', props),
+    '&:focus:hover': interactionStyleAccessor('focus', props),
+    '&:active:hover': interactionStyleAccessor('active', props),
 
-  }, before(theme.fadeZoomIn, props.loading), {
     '&[title]': {
-      pointerEvents: props.disabled ? 'auto' : 'none'
+      pointerEvents: disabled ? 'auto' : 'none'
     },
 
-    backgroundColor: props.loading ? theme.disabledBackground : props.inverted ? theme.normal.backgroundColor.inverted[props.type] : theme.normal.backgroundColor[props.type]
+    backgroundColor: backgroundColor,
+    color: loading ? backgroundColor : color,
 
-  }, border(theme, props.group, props.type, props.loading, props.inverted), {
-    color: props.loading ? theme.disabledBackground : props.inverted ? theme.normal.color.inverted[props.type] : theme.normal.color[props.type],
-
-    cursor: props.disabled || props.loading ? 'default' : theme.cursor,
+    cursor: disabled || loading ? 'default' : theme.cursor,
     display: theme.display,
@@ -175,8 +148,5 @@
     fontWeight: theme.fontWeight,
-    lineHeight: theme.lineHeight,
+    lineHeight: theme.lineHeight
 
-    marginBottom: props.group ? 0 : theme.marginBottom,
-    marginRight: props.group ? 0 : theme.marginRight,
-    marginTop: props.group ? 0 : theme.marginTop
-  }, marginTop(theme.marginTop, props.group, props.spaced, props.direction), marginLeft(theme.marginLeft, props.group, props.spaced, props.direction), opacity(props.loading, props.disabled), {
+  }, before(props), border(props), margin(props), opacity(props), radius(props), {
 
@@ -188,5 +158,4 @@ paddingBottom: iconOnly ? '5px' : theme.paddingBottom,
 
-    pointerEvents: props.disabled ? 'none' : 'auto',
-    position: theme.position
-  }, radius(theme.borderRadius, props.group, props.spaced), {
+    pointerEvents: disabled ? 'none' : 'auto',
+    position: theme.position,
 
@@ -200,6 +169,5 @@ textAlign: theme.textAlign,
     userSelect: theme.userSelect,
-    float: theme.float,
     maxWidth: theme.maxWidth,
     float: theme.float,
-    width: props.direction === 'column' ? '100%' : 'auto'
+    width: direction === 'column' ? '100%' : 'auto'
   });
@@ -278,3 +246,5 @@ };
   submit: false,
-  loading: false
+  loading: false,
+  inverted: false,
+  type: 'default'
 };
@@ -281,0 +251,0 @@

package.json

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

Worsened metrics

Total package byte prevSize

52144

decreased by-7.4%

Lines of code

975

decreased by-4.04%

No dependency changes