Skip to content

Commit

Permalink
Add: 'Label Button' component;
Browse files Browse the repository at this point in the history
  • Loading branch information
jsilverize committed Oct 11, 2018
1 parent 9e27afc commit 6bf9c7a
Show file tree
Hide file tree
Showing 33 changed files with 838 additions and 59 deletions.
34 changes: 33 additions & 1 deletion .docz/app/db.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
},
"menu": [],
"ordering": "descending",
"version": "0.1.1",
"version": "0.1.2",
"repository": null,
"native": false,
"base": "/aphrodite-react/",
Expand Down Expand Up @@ -124,6 +124,38 @@
"value": "Disabled"
}
]
},
"components/LabelButton/LabelButton.mdx": {
"name": "Label Button",
"menu": "Components",
"route": "/components/label-button",
"id": "180617494590163d18d508f40e9aafcf",
"filepath": "components/LabelButton/LabelButton.mdx",
"link": null,
"slug": "components-label-button-label-button",
"order": 0,
"headings": [
{
"depth": 1,
"slug": "button-as-label",
"value": "Button as Label"
},
{
"depth": 2,
"slug": "properties",
"value": "Properties"
},
{
"depth": 2,
"slug": "colors",
"value": "Colors"
},
{
"depth": 2,
"slug": "block",
"value": "Block"
}
]
}
}
}
2 changes: 2 additions & 0 deletions .docz/app/imports.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ export const imports = {
import(/* webpackPrefetch: true, webpackChunkName: "index" */ 'index.mdx'),
'components/Button/Button.mdx': () =>
import(/* webpackPrefetch: true, webpackChunkName: "components-button-button" */ 'components/Button/Button.mdx'),
'components/LabelButton/LabelButton.mdx': () =>
import(/* webpackPrefetch: true, webpackChunkName: "components-label-button-label-button" */ 'components/LabelButton/LabelButton.mdx'),
}
48 changes: 27 additions & 21 deletions dist/components/Button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

var _constants = require("./constants");

var _constants2 = require("../../constants");

var _Bordered = _interopRequireDefault(require("./Bordered/Bordered"));

var _Regular = _interopRequireDefault(require("./Regular/Regular"));
Expand Down Expand Up @@ -55,53 +57,57 @@ function (_React$Component) {
var _this$props = this.props,
block = _this$props.block,
bordered = _this$props.bordered,
size = _this$props.size;
var styles = Object.assign({}, _constants.BUTTON_STYLES);
size = _this$props.size,
styles = _this$props.styles;

var _styles = Object.assign({}, _constants.BUTTON_STYLES);

if (block) {
styles.display = 'block';
styles.width = '100%';
_styles.display = 'block';
_styles.width = '100%';
}

switch (size) {
case 'xs':
styles.fontSize = '9px';
styles.minHeight = '20px';
styles.lineHeight = '18px';
styles['@media (max-width: 767px)'] = {
_styles.fontSize = '9px';
_styles.minHeight = '20px';
_styles.lineHeight = '18px';
_styles[_constants2.MEDIA_QUERIES.XS] = {
minHeight: '30px',
lineHeight: '28px'
};
break;

case 'sm':
styles.fontSize = '13px';
styles.minHeight = '30px';
styles.lineHeight = '28px';
styles['@media (max-width: 767px)'] = {
_styles.fontSize = '13px';
_styles.minHeight = '30px';
_styles.lineHeight = '28px';
_styles[_constants2.MEDIA_QUERIES.XS] = {
minHeight: '40px',
lineHeight: '38px'
};
break;

default:
styles.minHeight = '40px';
styles.lineHeight = '38px';
styles['@media (max-width: 767px)'] = {
_styles.minHeight = '40px';
_styles.lineHeight = '38px';
_styles[_constants2.MEDIA_QUERIES.XS] = {
minHeight: '50px',
lineHeight: '48px'
};
}

_styles = Object.assign(_styles, styles);

if (bordered) {
return _react.default.createElement(_Bordered.default, _extends({
styles: styles
}, this.props));
return _react.default.createElement(_Bordered.default, _extends({}, this.props, {
styles: _styles
}));
}

return _react.default.createElement(_Regular.default, _extends({
styles: styles
}, this.props));
return _react.default.createElement(_Regular.default, _extends({}, this.props, {
styles: _styles
}));
}
}]);

Expand Down
215 changes: 215 additions & 0 deletions dist/components/LabelButton/LabelButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactEmotion = _interopRequireDefault(require("react-emotion"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _constants = require("../../constants");

var _ = require("../");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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; }

/* Style Wrapper */
var StyledLabelWrapper =
/*#__PURE__*/
(0, _reactEmotion.default)('div', {
target: "eofkjt00"
})(function (props) {
return _objectSpread({}, props.styles, {
position: 'relative'
});
});
/* Styled Button Label */

var StyledLabelButton = Object.assign(_constants.ANIMATIONS.PULL_UP, _defineProperty({
borderRadius: '8px',
paddingRight: '5px',
paddingLeft: '5px',
'*': {
fontSize: '12px',
lineHeight: '10px',
margin: '0 0 10px'
}
}, _constants.MEDIA_QUERIES.XS, {
minHeight: '38px',
maxHeight: '40px',
'*': {
display: 'none'
}
}));
/* Styled Input */

var StyledLabelInput =
/*#__PURE__*/
(0, _reactEmotion.default)('input', {
target: "eofkjt01"
})(function (props) {
return {
position: 'absolute',
opacity: 0,
zIndex: 1,
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
cursor: 'pointer',
borderRadius: '8px',
'&:disabled': {
cursor: 'not-allowed'
}
};
});
/* Component it self */

var LabelButton =
/*#__PURE__*/
function (_React$Component) {
_inherits(LabelButton, _React$Component);

/**
* Component Constructor
*
* @param {object} props - Component Inherit Props
*/
function LabelButton(props) {
var _this;

_classCallCheck(this, LabelButton);

_this = _possibleConstructorReturn(this, _getPrototypeOf(LabelButton).call(this, props));
_this.props = props;
_this.state = {
checked: props.checked || false
};
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
/**
* Handle Input Change
*
* @param {object} evt - DOM element click event
*/


_createClass(LabelButton, [{
key: "handleChange",
value: function handleChange(evt) {
if (!evt || !evt.target) {
return;
}

var _this$props = this.props,
value = _this$props.value,
onChange = _this$props.onChange;
this.setState({
checked: evt.target.checked
}, function () {
onChange(evt);
});
}
/**
* Component Render
*/

}, {
key: "render",
value: function render() {
var props = this.props,
state = this.state;
var labelInputId = "labelBtnInput".concat(props.id);
var labelDisabled = props.disabled ? true : false;
return _react.default.createElement(StyledLabelWrapper, {
styles: {
display: props.hasOwnProperty('block') ? 'block' : 'inline-block'
}
}, _react.default.createElement(StyledLabelInput, {
type: "checkbox",
id: labelInputId,
name: props.name,
onChange: this.handleChange,
disabled: labelDisabled,
value: props.value,
checked: state.checked
}), _react.default.createElement(_.Button, {
type: "button",
id: "labelBtn".concat(props.id),
styles: StyledLabelButton,
disabled: labelDisabled,
bordered: !state.checked,
color: props.color,
block: props.block
}, props.children));
}
}]);

return LabelButton;
}(_react.default.Component);
/* Default Properties */


LabelButton.defaultProps = {
id: "random-".concat(Math.random()),
name: '',
value: '',
onChange: function onChange() {}
};
/* Properties Types */

LabelButton.propTypes = {
/**
* Should the Input/Button checked?
*/
checked: _propTypes.default.bool,

/**
* Should the Input/Button be disabled?
*/
disabled: _propTypes.default.bool,

/**
* Renders the button using an alternative color.
* Secondary, Warning, Error, Success
*/
color: _propTypes.default.string,

/**
* Should the Button be block?
*/
block: _propTypes.default.bool
};
/* Export Component */

var _default = LabelButton;
exports.default = _default;
8 changes: 8 additions & 0 deletions dist/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@ Object.defineProperty(exports, "Button", {
return _Button.default;
}
});
Object.defineProperty(exports, "LabelButton", {
enumerable: true,
get: function get() {
return _LabelButton.default;
}
});

var _Button = _interopRequireDefault(require("./Button/Button"));

var _LabelButton = _interopRequireDefault(require("./LabelButton/LabelButton"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Loading

0 comments on commit 6bf9c7a

Please sign in to comment.