@hixme-ui/button - npm Package Compare versions

Comparing version 1.9.0 to 1.9.1

lib/Button.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
@@ -31,10 +35,26 @@
 var Button = function Button(_ref) {
-  var outline = _ref.outline,
-      props = (0, _objectWithoutProperties3.default)(_ref, ['outline']);
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      outline = _ref.outline,
+      submitting = _ref.submitting,
+      submittingText = _ref.submittingText,
+      props = (0, _objectWithoutProperties3.default)(_ref, ['children', 'disabled', 'outline', 'submitting', 'submittingText']);
 
   if (outline) {
-    return _react2.default.createElement(_OutlineButton2.default, props);
+    return _react2.default.createElement(
+      _OutlineButton2.default,
+      (0, _extends3.default)({}, props, {
+        disabled: submitting || disabled
+      }),
+      submitting ? submittingText : children
+    );
   }
 
-  return _react2.default.createElement(_GradientButton2.default, props);
+  return _react2.default.createElement(
+    _GradientButton2.default,
+    (0, _extends3.default)({}, props, {
+      disabled: submitting || disabled
+    }),
+    submitting ? submittingText : children
+  );
 };
@@ -46,6 +66,15 @@
 Button.propTypes = {
-  outline: _propTypes2.default.bool
+  disabled: _propTypes2.default.bool,
+  children: _propTypes2.default.node,
+  outline: _propTypes2.default.bool,
+  submitting: _propTypes2.default.bool,
+  submittingText: _propTypes2.default.string
 };
+
 Button.defaultProps = {
-  outline: false
+  disabled: false,
+  children: null,
+  outline: false,
+  submitting: false,
+  submittingText: 'Submitting...'
 };
@@ -52,0 +81,0 @@

lib/GradientButton.js

@@ -11,29 +11,13 @@ 'use strict';
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  transition: all .25s ease;\n  :hover:enabled {\n    background-size: 100%;\n  };\n  :active:enabled {\n    box-shadow: ', ';\n  };\n  :disabled {\n    opacity: .4;\n    cursor: not-allowed;\n  };\n  height: ', ';\n  min-width: ', ';\n  max-width: ', ';\n  width: ', ';\n  font-size:', ';\n  color: ', ';\n  background: ', ';\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  background-size: 200%;\n  border-style: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0.25em 1em;\n  border-radius: ', ';\n'], ['\n  transition: all .25s ease;\n  :hover:enabled {\n    background-size: 100%;\n  };\n  :active:enabled {\n    box-shadow: ', ';\n  };\n  :disabled {\n    opacity: .4;\n    cursor: not-allowed;\n  };\n  height: ', ';\n  min-width: ', ';\n  max-width: ', ';\n  width: ', ';\n  font-size:', ';\n  color: ', ';\n  background: ', ';\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  background-size: 200%;\n  border-style: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0.25em 1em;\n  border-radius: ', ';\n']);
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  background: ', ';\n  background-size: 200%;\n  border-style: none;\n  border-radius: ', ';\n  * {\n    cursor: pointer;\n  }\n'], ['\n  background: ', ';\n  background-size: 200%;\n  border-style: none;\n  border-radius: ', ';\n  * {\n    cursor: pointer;\n  }\n']);
 
-var _styledComponents = require('styled-components');
+var _themeProps = require('@hixme-ui/theme-props');
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+var _ButtonBase = require('./ButtonBase');
 
-var _themeProps = require('@hixme-ui/theme-props');
+var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var GradientButton = _styledComponents2.default.button(_templateObject, function (props) {
-  return (0, _themeProps.getShadow)(props, 'none');
-}, function (props) {
-  return (0, _themeProps.getButtonHeight)(props);
-}, function (props) {
-  return (0, _themeProps.getButtonMinWidth)(props);
-}, function (props) {
-  return props.maxWidth ? props.maxWidth : 'none';
-}, function (props) {
-  if (props.width) return props.width;
-  if (props.block) return '100%';
-  return 'auto';
-}, function (props) {
-  return (0, _themeProps.getButtonFontSize)(props);
-}, function (props) {
-  return (0, _themeProps.getButtonTextColor)(props);
-}, function (props) {
+var GradientButton = _ButtonBase2.default.extend(_templateObject, function (props) {
   return (0, _themeProps.getButtonGradientColor)(props);
@@ -40,0 +24,0 @@ }, function (props) {

lib/OutlineButton.js

@@ -11,13 +11,13 @@ 'use strict';
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  :hover:enabled {\n    box-shadow: ', ';\n  };\n  :active:enabled {\n    border-color: white;\n  };\n  border-color: ', ';\n  color: ', ';\n  background: white;\n  border-style: solid;\n  border-width: 1px;\n'], ['\n  :hover:enabled {\n    box-shadow: ', ';\n  };\n  :active:enabled {\n    border-color: white;\n  };\n  border-color: ', ';\n  color: ', ';\n  background: white;\n  border-style: solid;\n  border-width: 1px;\n']);
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  :hover:enabled {\n    box-shadow: ', ';\n  };\n  :active:enabled {\n    border-color: white;\n  };\n  border-color: ', ';\n  color: ', ';\n  background: white;\n  border-style: solid;\n  border-width: 2px;\n'], ['\n  :hover:enabled {\n    box-shadow: ', ';\n  };\n  :active:enabled {\n    border-color: white;\n  };\n  border-color: ', ';\n  color: ', ';\n  background: white;\n  border-style: solid;\n  border-width: 2px;\n']);
 
 var _themeProps = require('@hixme-ui/theme-props');
 
-var _GradientButton = require('./GradientButton');
+var _ButtonBase = require('./ButtonBase');
 
-var _GradientButton2 = _interopRequireDefault(_GradientButton);
+var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var OutlineButton = _GradientButton2.default.extend(_templateObject, function (props) {
+var OutlineButton = _ButtonBase2.default.extend(_templateObject, function (props) {
   return (0, _themeProps.getShadow)(props);
@@ -24,0 +24,0 @@ }, function (props) {

package.json

 {
   "name": "@hixme-ui/button",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "hixme-ui Button component",
@@ -82,4 +82,4 @@ "publishConfig": {
   "dependencies": {
-    "@hixme-ui/theme": "^1.9.0",
-    "@hixme-ui/theme-props": "^1.9.0",
+    "@hixme-ui/theme": "^1.9.1",
+    "@hixme-ui/theme-props": "^1.8.1",
     "prop-types": "^15.6.0",
@@ -86,0 +86,0 @@ "react": "^16.2.0",

README.md

@@ -6,2 +6,3 @@ # hixme-ui button
 ```
+[View it live](https://hixme.github.io/hixme-ui/button)
 
@@ -8,0 +9,0 @@ ## Usage

src/Button.js

 import React from 'react'
 import PropTypes from 'prop-types'
+
 import OutlineButton from './OutlineButton'
@@ -7,10 +8,28 @@ import GradientButton from './GradientButton'
 const Button = ({
+  children,
+  disabled,
   outline,
+  submitting,
+  submittingText,
   ...props
 }) => {
   if (outline) {
-    return (<OutlineButton {...props} />)
+    return (
+      <OutlineButton
+        {...props}
+        disabled={submitting || disabled}
+      >
+        {submitting ? submittingText : children}
+      </OutlineButton>
+    )
   }
 
-  return (<GradientButton {...props} />)
+  return (
+    <GradientButton
+      {...props}
+      disabled={submitting || disabled}
+    >
+      {submitting ? submittingText : children}
+    </GradientButton>
+  )
 }
@@ -22,8 +41,17 @@
 Button.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
   outline: PropTypes.bool,
+  submitting: PropTypes.bool,
+  submittingText: PropTypes.string,
 }
+
 Button.defaultProps = {
+  disabled: false,
+  children: null,
   outline: false,
+  submitting: false,
+  submittingText: 'Submitting...',
 }
 
 export default Button

src/GradientButton.js

@@ -1,44 +0,16 @@
-import styled from 'styled-components'
 import {
   getButtonGradientColor,
-  getButtonTextColor,
   getButtonBorderRadius,
-  getButtonHeight,
-  getButtonMinWidth,
-  getButtonFontSize,
-  getShadow,
  } from '@hixme-ui/theme-props'
 
-const GradientButton = styled.button`
-  transition: all .25s ease;
-  :hover:enabled {
-    background-size: 100%;
-  };
-  :active:enabled {
-    box-shadow: ${props => getShadow(props, 'none')};
-  };
-  :disabled {
-    opacity: .4;
-    cursor: not-allowed;
-  };
-  height: ${props => getButtonHeight(props)};
-  min-width: ${props => getButtonMinWidth(props)};
-  max-width: ${props => (props.maxWidth ? props.maxWidth : 'none')};
-  width: ${(props) => {
-    if (props.width) return props.width
-    if (props.block) return '100%'
-    return 'auto'
-  }};
-  font-size:${props => getButtonFontSize(props)};
-  color: ${props => getButtonTextColor(props)};
+import ButtonBase from './ButtonBase'
+
+const GradientButton = ButtonBase.extend`
   background: ${props => getButtonGradientColor(props)};
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
   background-size: 200%;
   border-style: none;
-  outline: none;
-  cursor: pointer;
-  padding: 0.25em 1em;
   border-radius: ${props => getButtonBorderRadius(props)};
+  * {
+    cursor: pointer;
+  }
 `
@@ -45,0 +17,0 @@

src/OutlineButton.js

@@ -7,5 +7,5 @@ import {
 
-import GradientButton from './GradientButton'
+import ButtonBase from './ButtonBase'
 
-const OutlineButton = GradientButton.extend`
+const OutlineButton = ButtonBase.extend`
   :hover:enabled {
@@ -21,3 +21,3 @@ box-shadow: ${props => getShadow(props)};
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
 `
@@ -24,0 +24,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

22557

increased by23.41%

Number of package files

18

increased by20%

Lines of code

273

increased by42.19%

Number of lines in readme file

61

increased by1.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@hixme-ui/theme@^1.9.1

• Updated@hixme-ui/theme-props@^1.8.1