diff --git a/Makefile b/Makefile index 5a28a83df..2f49a641b 100644 --- a/Makefile +++ b/Makefile @@ -2,10 +2,10 @@ SHELL = /bin/bash BABEL := node_modules/babel-cli/bin/babel.js JEST := ./node_modules/.bin/jest --maxWorkers=1 --config ./jestconfig.json -JS_FILES := $(shell find . -name "*.js" -not -path "./node_modules/*" -not -path "./dist/*" -not -name "bundle.js" -not -path "./vendor/*") -JSX_FILES := $(shell find . -name "*.jsx" -not -path "./node_modules/*" -not -path "./dist/*" -not -path "./vendor/*") +JS_FILES := $(shell find . -name "*.js" -not -path "./node_modules/*" -not -path "./dist/*" -not -name "bundle.js") +JSX_FILES := $(shell find . -name "*.jsx" -not -path "./node_modules/*" -not -path "./dist/*") TS_FILES := $(shell find . -regex ".*\.tsx*" -not -path "./node_modules/*") -LESS_FILES := $(shell find . -name "*.less" -not -path "./node_modules/*" -not -path "./dist/*" -not -path "./vendor/*") +LESS_FILES := $(shell find . -name "*.less" -not -path "./node_modules/*" -not -path "./dist/*") LINT := ./node_modules/.bin/eslint STYLELINT := ./node_modules/.bin/stylelint --config ./.stylelintrc TESTS := $(TESTS_JS) $(TESTS_TS) diff --git a/dist/AlertBox/AlertBox.js b/dist/AlertBox/AlertBox.js new file mode 100644 index 000000000..c0439c071 --- /dev/null +++ b/dist/AlertBox/AlertBox.js @@ -0,0 +1,137 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _lodash = require("lodash"); + +var _lodash2 = _interopRequireDefault(_lodash); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var PropTypes = _interopRequireWildcard(_propTypes); + +var _icons = require("./icons"); + +var _flex = require("../flex"); + +require("./AlertBox.less"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var ICONS = { + warning: _icons.WarningIcon, + success: _icons.SuccessIcon, + error: _icons.ErrorIcon, + info: _icons.InfoIcon +}; + +var CLASSNAMES = { + CONTAINER: "AlertBox--container", + HEADER: "AlertBox--header", + TITLE: "AlertBox--title", + CLOSE: "AlertBox--close" +}; + +/* + * AlertBox is a closable, highlighted box +*/ + +var AlertBox = function (_PureComponent) { + _inherits(AlertBox, _PureComponent); + + function AlertBox(props) { + _classCallCheck(this, AlertBox); + + var _this = _possibleConstructorReturn(this, (AlertBox.__proto__ || Object.getPrototypeOf(AlertBox)).call(this, props)); + + _this.state = { isOpen: true }; + return _this; + } + + _createClass(AlertBox, [{ + key: "closeBox", + value: function closeBox() { + this.setState({ isOpen: false }); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _props = this.props; + var children = _props.children; + var className = _props.className; + var type = _props.type; + var title = _props.title; + var isClosable = _props.isClosable; + var isOpen = this.state.isOpen; + + var Icon = ICONS[type]; + if (!isOpen) { + return null; + } + return _react2.default.createElement( + "div", + { className: (0, _classnames2.default)("AlertBox--" + type, CLASSNAMES.CONTAINER, className) }, + _react2.default.createElement( + _flex.FlexBox, + { className: CLASSNAMES.HEADER, alignItems: _flex.ItemAlign.CENTER }, + _react2.default.createElement(Icon, null), + _react2.default.createElement( + _flex.FlexItem, + { className: CLASSNAMES.TITLE, grow: true }, + title + ), + isClosable && _react2.default.createElement( + "button", + { className: CLASSNAMES.CLOSE, onClick: function onClick() { + return _this2.closeBox(); + } }, + _react2.default.createElement(_icons.CloseIcon, null) + ) + ), + children + ); + } + }]); + + return AlertBox; +}(_react.PureComponent); + +exports.default = AlertBox; + + +var TYPES = { + WARNING: "warning", + SUCCESS: "success", + ERROR: "error", + INFO: "info" +}; + +AlertBox.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, + title: PropTypes.string.isRequired, + type: PropTypes.oneOf(_lodash2.default.values(TYPES)), + isClosable: PropTypes.bool +}; \ No newline at end of file diff --git a/dist/AlertBox/AlertBox.less b/dist/AlertBox/AlertBox.less new file mode 100644 index 000000000..add2c81ba --- /dev/null +++ b/dist/AlertBox/AlertBox.less @@ -0,0 +1,78 @@ +@import (reference) "../less/index"; + +@pale_steps: 6; + +.AlertBox--container { + .borderRadius--l; + .padding--s; + .border--s(transparent); + border-left-width: @size_s; +} + +.AlertBox--title { + .margin--left--xs; + .text--semi-bold; +} + +.AlertBox--header { + .padding--bottom--xs; +} + +.AlertBox--Icon { + height: @size_m; + width: @size_m; +} + +.AlertBox--warning { + border-color: @alert_orange; + .tint(background-color, @alert_orange, @pale_steps); +} + +.AlertBox--Icon--warning { + fill: @alert_orange; +} + +.AlertBox--success { + border-color: @alert_green; + .tint(background-color, @alert_green, @pale_steps); +} + +.AlertBox--Icon--success { + fill: @alert_green; +} + +.AlertBox--error { + border-color: @alert_red; + .tint(background-color, @alert_red, @pale_steps); +} + +.AlertBox--Icon--error { + fill: @alert_red; +} + +.AlertBox--info { + border-color: @primary_blue; + .tint(background-color, @primary_blue, @pale_steps); +} + +.AlertBox--Icon--info { + fill: @primary_blue; +} + +.AlertBox--close { + cursor: pointer; + height: @size_m; + width: @size_m; + background: none; + outline: none; + border: none; + padding: 0; + margin: 0; + opacity: 0.4; + float: right; + + &:hover { + opacity: 0.8; + } +} + diff --git a/dist/AlertBox/icons.js b/dist/AlertBox/icons.js new file mode 100644 index 000000000..b75030cbe --- /dev/null +++ b/dist/AlertBox/icons.js @@ -0,0 +1,66 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.CloseIcon = CloseIcon; +exports.WarningIcon = WarningIcon; +exports.SuccessIcon = SuccessIcon; +exports.ErrorIcon = ErrorIcon; +exports.InfoIcon = InfoIcon; + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var CLASSNAME = "AlertBox--Icon"; + +function CloseIcon() { + return _react2.default.createElement( + "svg", + { viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" }, + _react2.default.createElement("path", { d: "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" }) + ); +} + +function WarningIcon() { + return _react2.default.createElement( + "svg", + { className: (0, _classnames2.default)(CLASSNAME, CLASSNAME + "--warning"), width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" }, + _react2.default.createElement("path", { d: "M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z" }), + " " + ); +} + +function SuccessIcon() { + return _react2.default.createElement( + "svg", + { className: (0, _classnames2.default)(CLASSNAME, CLASSNAME + "--success"), width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" }, + _react2.default.createElement("path", { d: "M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" }), + " " + ); +} + +function ErrorIcon() { + return _react2.default.createElement( + "svg", + { className: (0, _classnames2.default)(CLASSNAME, CLASSNAME + "--error"), width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" }, + _react2.default.createElement("path", { d: "M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z" }), + " " + ); +} + +function InfoIcon() { + return _react2.default.createElement( + "svg", + { className: (0, _classnames2.default)(CLASSNAME, CLASSNAME + "--info"), width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" }, + _react2.default.createElement("path", { d: "M1152 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" }), + " " + ); +} \ No newline at end of file diff --git a/dist/Button/Button.js b/dist/Button/Button.js new file mode 100644 index 000000000..1a6806e01 --- /dev/null +++ b/dist/Button/Button.js @@ -0,0 +1,162 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Button = undefined; + +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; }; }(); + +var _lodash = require("lodash"); + +var _lodash2 = _interopRequireDefault(_lodash); + +var _classnames = require("classnames"); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var PropTypes = _interopRequireWildcard(_propTypes); + +require("./Button.less"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var Button = exports.Button = function (_React$PureComponent) { + _inherits(Button, _React$PureComponent); + + function Button() { + _classCallCheck(this, Button); + + return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments)); + } + + _createClass(Button, [{ + key: "focus", + value: function focus() { + if (this._buttonRef) { + this._buttonRef.focus(); + } + } + }, { + key: "blur", + value: function blur() { + if (this._buttonRef) { + this._buttonRef.blur(); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var Size = Button.Size; + var Type = Button.Type; + var _props = this.props; + var className = _props.className; + var disabled = _props.disabled; + var href = _props.href; + var onClick = _props.onClick; + var size = _props.size; + var style = _props.style; + var submit = _props.submit; + var target = _props.target; + var type = _props.type; + var value = _props.value; + + + if (type === Type.DESTRUCTIVE && size === Size.S) { + throw new Error("Small destructive buttons are not supported"); + } + + if (href && submit) { + throw new Error("Buttons with href do not support the submit option"); + } + + var classes = (0, _classnames2.default)("Button Button--" + type, "Button--" + size, className); + + if (href == null || disabled) { + // use