diff --git a/.docz/app/db.json b/.docz/app/db.json index 6fc60e01..1a89830f 100644 --- a/.docz/app/db.json +++ b/.docz/app/db.json @@ -33,7 +33,7 @@ }, "menu": [], "ordering": "descending", - "version": "0.1.1", + "version": "0.1.2", "repository": null, "native": false, "base": "/aphrodite-react/", @@ -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" + } + ] } } } \ No newline at end of file diff --git a/.docz/app/imports.js b/.docz/app/imports.js index 0f1e8cbc..39a4a07d 100644 --- a/.docz/app/imports.js +++ b/.docz/app/imports.js @@ -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'), } diff --git a/dist/components/Button/Button.js b/dist/components/Button/Button.js index bb96ca57..b1ee56ef 100644 --- a/dist/components/Button/Button.js +++ b/dist/components/Button/Button.js @@ -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")); @@ -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 + })); } }]); diff --git a/dist/components/LabelButton/LabelButton.js b/dist/components/LabelButton/LabelButton.js new file mode 100644 index 00000000..77f54759 --- /dev/null +++ b/dist/components/LabelButton/LabelButton.js @@ -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; \ No newline at end of file diff --git a/dist/components/index.js b/dist/components/index.js index 43466952..387ceade 100644 --- a/dist/components/index.js +++ b/dist/components/index.js @@ -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 }; } \ No newline at end of file diff --git a/dist/constants/animations.constants.js b/dist/constants/animations.constants.js new file mode 100644 index 00000000..aadeb924 --- /dev/null +++ b/dist/constants/animations.constants.js @@ -0,0 +1,31 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.ANIMATIONS = void 0; + +var _reactEmotion = require("react-emotion"); + +/* Packages */ + +/* Animation Fade In Up */ +var fadeInUp = +/*#__PURE__*/ +(0, _reactEmotion.keyframes)("0%{opacity:0;transform:translate3d(0,75%,0);}100%{opacity:1;transform:none;}"); +/* Animation Pull Up */ + +var pullUp = +/*#__PURE__*/ +(0, _reactEmotion.keyframes)("0%{transform:scaleY(0.1);}25%{transform:scaleY(1);}50%{transform:scaleY(0.95);}100%{transform:scaleY(1);}"); +var ANIMATIONS = { + FADE_IN_UP: { + animation: "".concat(fadeInUp, " 0.75s ease") + }, + PULL_UP: { + willChange: 'transform-origin', + animation: "".concat(pullUp, " 0.75s ease"), + transformOrigin: '50% 100%' + } +}; +exports.ANIMATIONS = ANIMATIONS; \ No newline at end of file diff --git a/dist/constants/colors.constants.js b/dist/constants/colors.constants.js index 1820dad2..3167c525 100644 --- a/dist/constants/colors.constants.js +++ b/dist/constants/colors.constants.js @@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.COLORS = void 0; + +/* Color Base */ var _COLORS = { BLACK: 'rgb(45, 45, 45)', // #2D2D2D @@ -19,12 +21,12 @@ var _COLORS = { // #9DA6AD DARK_GREY: 'rgb(122, 128, 133)', // #7A8085 + YELLOW: 'rgb(255, 198, 30)', + // #FFC61E ORANGE: 'rgb(252, 163, 17)', // #FCA311 - LIGHT_ORANGE: 'rgb(255, 141, 80)', + ORANGE_RED: 'rgb(255, 141, 80)', // #FF8D50 - YELLOW: 'rgb(255, 198, 30)', - // #FFC61E RED: 'rgb(241, 51, 53)', // #F13335 GREEN: 'rgb(96,198,89)', @@ -36,6 +38,8 @@ var _COLORS = { LIGHT_PINK: 'rgb(248, 130, 184)' // #F882B8 }; +/* Export */ + var COLORS = Object.assign({}, _COLORS, { PRIMARY: _COLORS.BLUE, SECONDARY: _COLORS.ORANGE, diff --git a/dist/constants/index.js b/dist/constants/index.js index cab8cd17..3ba69f37 100644 --- a/dist/constants/index.js +++ b/dist/constants/index.js @@ -4,6 +4,18 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _animations = require("./animations.constants"); + +Object.keys(_animations).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + Object.defineProperty(exports, key, { + enumerable: true, + get: function get() { + return _animations[key]; + } + }); +}); + var _colors = require("./colors.constants"); Object.keys(_colors).forEach(function (key) { @@ -14,4 +26,28 @@ Object.keys(_colors).forEach(function (key) { return _colors[key]; } }); +}); + +var _screenSizes = require("./screen-sizes.constants"); + +Object.keys(_screenSizes).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + Object.defineProperty(exports, key, { + enumerable: true, + get: function get() { + return _screenSizes[key]; + } + }); +}); + +var _mediaQueries = require("./media-queries.constants"); + +Object.keys(_mediaQueries).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + Object.defineProperty(exports, key, { + enumerable: true, + get: function get() { + return _mediaQueries[key]; + } + }); }); \ No newline at end of file diff --git a/dist/constants/media-queries.constants.js b/dist/constants/media-queries.constants.js new file mode 100644 index 00000000..3a9e06e8 --- /dev/null +++ b/dist/constants/media-queries.constants.js @@ -0,0 +1,37 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.MEDIA_QUERIES = void 0; + +var _ = require("../"); + +/* Constants */ + +/* Media Queries */ +var MEDIA_QUERIES = { + PRINT: '@media print', + XXS: "@media (max-width: ".concat(_.SCREEN_SIZES.XS - 1, "px)"), + XS: "@media (min-width: ".concat(_.SCREEN_SIZES.XS, "px) and (max-width: ").concat(_.SCREEN_SIZES.SM - 1, "px)"), + SM: "@media (min-width: ".concat(_.SCREEN_SIZES.SM, "px) and (max-width: ").concat(_.SCREEN_SIZES.MD - 1, "px)"), + MD: "@media (min-width: ".concat(_.SCREEN_SIZES.MD, "px) and (max-width: ").concat(_.SCREEN_SIZES.LG - 1, "px)"), + LG: "@media (min-width: ".concat(_.SCREEN_SIZES.LG, "px) and (max-width: ").concat(_.SCREEN_SIZES.XL - 1, "px)"), + XL: "@media (min-width: ".concat(_.SCREEN_SIZES.XL, "px)"), + // LESS THAN + LT: { + XS: "@media (min-width: ".concat(_.SCREEN_SIZES.XS, "px)"), + SM: "@media (min-width: ".concat(_.SCREEN_SIZES.SM, "px)"), + MD: "@media (min-width: ".concat(_.SCREEN_SIZES.MD, "px)"), + LG: "@media (min-width: ".concat(_.SCREEN_SIZES.LG, "px)") + }, + // GREATER THAN + GT: { + XS: "@media (min-width: ".concat(_.SCREEN_SIZES.XS, "px)"), + SM: "@media (min-width: ".concat(_.SCREEN_SIZES.SM, "px)"), + MD: "@media (min-width: ".concat(_.SCREEN_SIZES.MD, "px)"), + LG: "@media (min-width: ".concat(_.SCREEN_SIZES.LG, "px)"), + XL: "@media (min-width: ".concat(_.SCREEN_SIZES.XL, "px)") + } +}; +exports.MEDIA_QUERIES = MEDIA_QUERIES; \ No newline at end of file diff --git a/dist/constants/screen-sizes.constants.js b/dist/constants/screen-sizes.constants.js new file mode 100644 index 00000000..b565e99b --- /dev/null +++ b/dist/constants/screen-sizes.constants.js @@ -0,0 +1,16 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.SCREEN_SIZES = void 0; + +/* Screen Sizes (pixels) */ +var SCREEN_SIZES = { + XS: 359, + SM: 768, + MD: 1024, + LG: 1280, + XL: 1440 +}; +exports.SCREEN_SIZES = SCREEN_SIZES; \ No newline at end of file diff --git a/docs/assets.json b/docs/assets.json index 5ba34a9c..e4e5450f 100644 --- a/docs/assets.json +++ b/docs/assets.json @@ -1,8 +1,9 @@ { - "app.js": "/aphrodite-react/static/js/app.90134ebc.js", - "index.js": "/aphrodite-react/static/js/index.b08238ea.js", - "components-button-button.js": "/aphrodite-react/static/js/components-button-button.524e7864.js", - "vendors.js": "/aphrodite-react/static/js/vendors.575afc31.js", - "runtime~app.js": "/aphrodite-react/static/js/runtime~app.aa6bf30e95bcfb462a9d.js", + "vendors.js": "/aphrodite-react/static/js/vendors.441203fa.js", + "app.js": "/aphrodite-react/static/js/app.70da6e9f.js", + "index.js": "/aphrodite-react/static/js/index.e368ed28.js", + "components-button-button.js": "/aphrodite-react/static/js/components-button-button.2c059a3b.js", + "components-label-button-label-button.js": "/aphrodite-react/static/js/components-label-button-label-button.8b7b0785.js", + "runtime~app.js": "/aphrodite-react/static/js/runtime~app.acde104acfeadb8fd574.js", "index.html": "/aphrodite-react/index.html" } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index ab670a34..d1b9eb14 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -
=0;r--){for(var u=t.words[r],c=l-1;c>=0;c--){var d=u>>c&1;i!==n[0]&&(i=this.sqr(i)),0!==d||0!==s?(s<<=1,s|=d,(4===++a||0===r&&0===c)&&(i=this.mul(i,n[s]),a=0,s=0)):a=0}l=26}return i},x.prototype.convertTo=function(e){var t=e.umod(this.m);return t===e?t.clone():t},x.prototype.convertFrom=function(e){var t=e.clone();return t.red=null,t},o.mont=function(e){return new j(e)},i(j,x),j.prototype.convertTo=function(e){return this.imod(e.ushln(this.shift))},j.prototype.convertFrom=function(e){var t=this.imod(e.mul(this.rinv));return t.red=null,t},j.prototype.imul=function(e,t){if(e.isZero()||t.isZero())return e.words[0]=0,e.length=1,e;var n=e.imul(t),r=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),i=n.isub(r).iushrn(this.shift),o=i;return i.cmp(this.m)>=0?o=i.isub(this.m):i.cmpn(0)<0&&(o=i.iadd(this.m)),o._forceRed(this)},j.prototype.mul=function(e,t){if(e.isZero()||t.isZero())return new o(0)._forceRed(this);var n=e.mul(t),r=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),i=n.isub(r).iushrn(this.shift),s=i;return i.cmp(this.m)>=0?s=i.isub(this.m):i.cmpn(0)<0&&(s=i.iadd(this.m)),s._forceRed(this)},j.prototype.invm=function(e){return this.imod(e._invmp(this.m).mul(this.r2))._forceRed(this)}}("undefined"===typeof e||e,this)}).call(this,n("./node_modules/webpack/buildin/module.js")(e))},"./node_modules/brorand/index.js":function(e,t,n){var r;function i(e){this.rand=e}if(e.exports=function(e){return r||(r=new i(null)),r.generate(e)},e.exports.Rand=i,i.prototype.generate=function(e){return this._rand(e)},i.prototype._rand=function(e){if(this.rand.getBytes)return this.rand.getBytes(e);for(var t=new Uint8Array(e),n=0;n=n&&t1114111||n<0||n>1114111)throw RangeError(a);for(var r,i,o=0,l=!1,u=e.length;on)return e;r>=t&&r<=n&&(i>t&&i-1<=n?(e.splice(o,2),o-=2):(e.splice(o-1,2),o-=2))}else{if(r==n+1)return e[o]=t,e;if(r>n)return e.splice(o,0,t,n+1),e;if(t>=r&&t=r&&t=i&&(e[o]=t,e[o+1]=n+1,l=!0)}o+=2}return l||e.push(t,n+1),e},k=function(e,t){var n=0,r=e.length,i=e[n],o=e[r-1];if(r>=2&&(to))return!1;for(;n1&&(e=b.call(arguments)),p(e)?(f(e,function(e){t.remove(e)}),t):(t.data=y(t.data,m(e)?e:R(e)),t))},addRange:function(e,t){return this.data=j(this.data,m(e)?e:R(e),m(t)?t:R(t)),this},removeRange:function(e,t){var n=m(e)?e:R(e),r=m(t)?t:R(t);return this.data=v(this.data,n,r),this},intersection:function(e){var t=e instanceof B?E(e.data):e;return this.data=function(e,t){for(var n,r=0,i=t.length,o=[];r0?this.properties[S-1].end:b;if("Property"===C.type&&(C.computed||v&&!o)){if(0===S&&(E=this.start+1),v=C,g){var O=(m?";\n"+_+g:", "+g)+("Literal"===C.key.type||C.computed?"":".");E