bbm-component-library-test
Version:
React based component library for all BBM web applications
120 lines (100 loc) • 12.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AnchorLinkTag = exports.RouterLinkTag = exports.AnchorSpan = exports.AnchorTag = exports.LinkTag = exports.ButtonTag = undefined;
var _templateObject = _taggedTemplateLiteral(["\n font-family: \"Lato Bold\", \"Lato\";\n background: white;\n border-radius: ", ";\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n outline: none;\n padding: 0 ", ";\n position: relative;\n text-align: center;\n text-decoration: none;\n transition: 0.2s ease-in-out color, 0.2s ease-in-out background,\n 0.2s ease-in-out box-shadow, 0.2s ease-in-out border, 0.1s transform;\n white-space: nowrap;\n width: ", ";\n user-select: none;\n opacity: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n :active {\n transform: translateY(", ");\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n"], ["\n font-family: \"Lato Bold\", \"Lato\";\n background: white;\n border-radius: ", ";\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n outline: none;\n padding: 0 ", ";\n position: relative;\n text-align: center;\n text-decoration: none;\n transition: 0.2s ease-in-out color, 0.2s ease-in-out background,\n 0.2s ease-in-out box-shadow, 0.2s ease-in-out border, 0.1s transform;\n white-space: nowrap;\n width: ", ";\n user-select: none;\n opacity: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n :active {\n transform: translateY(", ");\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n"]),
_templateObject2 = _taggedTemplateLiteral(["\n min-width: ", " !important;\n margin-right: 0 !important;\n text-align: center;\n padding: 0 ", " !important;\n\n ", ";\n "], ["\n min-width: ", " !important;\n margin-right: 0 !important;\n text-align: center;\n padding: 0 ", " !important;\n\n ", ";\n "]),
_templateObject3 = _taggedTemplateLiteral(["\n margin-right: ", " !important;\n "], ["\n margin-right: ", " !important;\n "]),
_templateObject4 = _taggedTemplateLiteral(["\n width: ", ";\n "], ["\n width: ", ";\n "]),
_templateObject5 = _taggedTemplateLiteral(["\n font-size: ", ";\n padding: 0 ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n padding: 0 ", ";\n line-height: ", ";\n "]),
_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n border: solid ", " ", ";\n box-shadow: 0 ", " ", " ", " rgba(117, 214, 184, 0.39);\n color: ", ";\n font-family: \"Lato Bold\", Lato;\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n box-shadow: 0 ", " ", " ", " rgba(51, 204, 208, 0.39);\n }\n "], ["\n background-color: ", ";\n border: solid ", " ", ";\n box-shadow: 0 ", " ", " ", " rgba(117, 214, 184, 0.39);\n color: ", ";\n font-family: \"Lato Bold\", Lato;\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n box-shadow: 0 ", " ", " ", " rgba(51, 204, 208, 0.39);\n }\n "]),
_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n border: solid ", " ", ";\n box-shadow: 0 ", " ", " ", " rgba(233, 103, 103, 0.3);\n color: ", ";\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n }\n "], ["\n background-color: ", ";\n border: solid ", " ", ";\n box-shadow: 0 ", " ", " ", " rgba(233, 103, 103, 0.3);\n color: ", ";\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n }\n "]),
_templateObject8 = _taggedTemplateLiteral(["\n border: solid ", " ", ";\n color: ", ";\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n "], ["\n border: solid ", " ", ";\n color: ", ";\n\n :hover:not([disabled]) {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n "]),
_templateObject9 = _taggedTemplateLiteral(["\n font-size: ", " !important;\n height: ", " !important;\n line-height: ", " !important;\n "], ["\n font-size: ", " !important;\n height: ", " !important;\n line-height: ", " !important;\n "]),
_templateObject10 = _taggedTemplateLiteral(["\n background-color: ", ";\n opacity: ", ";\n box-shadow: none;\n border: solid ", " ", ";\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n "], ["\n background-color: ", ";\n opacity: ", ";\n box-shadow: none;\n border: solid ", " ", ";\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n "]),
_templateObject11 = _taggedTemplateLiteral(["\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n "], ["\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n "]),
_templateObject12 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: none;\n border: solid ", " ", ";\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n border: solid ", " ", ";\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n "]),
_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n font-family: \"Lato\";\n font-size: ", ";\n font-weight: bold;\n letter-spacing: ", ";\n color: ", ";\n text-decoration: none;\n\n ", ";\n ", " :hover {\n opacity: 0.6;\n }\n"], ["\n display: flex;\n font-family: \"Lato\";\n font-size: ", ";\n font-weight: bold;\n letter-spacing: ", ";\n color: ", ";\n text-decoration: none;\n\n ", ";\n ", " :hover {\n opacity: 0.6;\n }\n"]),
_templateObject14 = _taggedTemplateLiteral(["\n font-family: Lato !important;\n margin-right: 0 !important;\n min-width: ", " !important;\n text-align: center;\n padding: 0 ", " !important;\n min-width: ", " !important;\n\n ", ";\n "], ["\n font-family: Lato !important;\n margin-right: 0 !important;\n min-width: ", " !important;\n text-align: center;\n padding: 0 ", " !important;\n min-width: ", " !important;\n\n ", ";\n "]),
_templateObject15 = _taggedTemplateLiteral(["\n font-family: \"Lato Bold\";\n letter-spacing: ", ";\n font-size: ", ";\n font-weight: 600;\n background: red;\n "], ["\n font-family: \"Lato Bold\";\n letter-spacing: ", ";\n font-size: ", ";\n font-weight: 600;\n background: red;\n "]),
_templateObject16 = _taggedTemplateLiteral(["\n padding-right: ", ";\n ", ";\n"], ["\n padding-right: ", ";\n ", ";\n"]),
_templateObject17 = _taggedTemplateLiteral(["\n opacity: ", ";\n font-family: \"Lato Bold\";\n color: ", ";\n letter-spacing: ", ";\n font-size: ", ";\n font-weight: 600;\n "], ["\n opacity: ", ";\n font-family: \"Lato Bold\";\n color: ", ";\n letter-spacing: ", ";\n font-size: ", ";\n font-weight: 600;\n "]);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _reactRouterDom = require("react-router-dom");
var _tools = require("../../styles/tools");
var _settings = require("../../styles/settings");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var ButtonTag = exports.ButtonTag = _styledComponents2.default.button(_templateObject, (0, _tools.rem)(4), (0, _tools.rem)(12), (0, _tools.rem)(0.2), (0, _tools.rem)(45), (0, _tools.rem)(20), function (props) {
return props.width ? (0, _tools.rem)(props.width) : "100%";
}, function (props) {
return props.opacity && props.disabled ? props.opacity : 1;
}, function (_ref) {
var width = _ref.width,
isPending = _ref.isPending;
return width && isPending && (0, _styledComponents.css)(_templateObject2, (0, _tools.rem)(width), (0, _tools.rem)(10), _tools.media.lg((0, _styledComponents.css)(_templateObject3, (0, _tools.rem)(20))));
}, _tools.media.md((0, _styledComponents.css)(_templateObject4, function (props) {
return props.width ? (0, _tools.rem)(props.width) : "auto";
})), _tools.media.lg((0, _styledComponents.css)(_templateObject5, (0, _tools.rem)(13), (0, _tools.rem)(28), (0, _tools.rem)(48))), (0, _tools.rem)(1), function (_ref2) {
var isCallToAction = _ref2.isCallToAction;
return isCallToAction && (0, _styledComponents.css)(_templateObject6, _settings.green, (0, _tools.rem)(1), _settings.green, (0, _tools.rem)(2), (0, _tools.rem)(7), (0, _tools.rem)(2), _settings.white, _settings.lightBlue, _settings.lightBlue, (0, _tools.rem)(2), (0, _tools.rem)(7), (0, _tools.rem)(2));
}, function (_ref3) {
var isWarning = _ref3.isWarning;
return isWarning && (0, _styledComponents.css)(_templateObject7, _settings.lightRed, (0, _tools.rem)(1), _settings.lightRed, (0, _tools.rem)(2), (0, _tools.rem)(7), (0, _tools.rem)(2), _settings.white, _settings.lighterRed, _settings.lighterRed);
}, function (_ref4) {
var isCallToAction = _ref4.isCallToAction,
isWarning = _ref4.isWarning;
return !isCallToAction && !isWarning && (0, _styledComponents.css)(_templateObject8, (0, _tools.rem)(1), _settings.blue, _settings.blue, _settings.blue, _settings.blue, _settings.white);
}, function (_ref5) {
var small = _ref5.small;
return small && (0, _styledComponents.css)(_templateObject9, (0, _tools.rem)(11), (0, _tools.rem)(40), (0, _tools.rem)(40));
}, function (_ref6) {
var disabled = _ref6.disabled,
loading = _ref6.loading,
opacity = _ref6.opacity;
return disabled && !loading && opacity && (0, _styledComponents.css)(_templateObject10, !opacity && _settings.grey, opacity, (0, _tools.rem)(1), _settings.grey, _settings.white);
}, function (_ref7) {
var disabled = _ref7.disabled,
loading = _ref7.loading;
return disabled && loading && (0, _styledComponents.css)(_templateObject11);
}, function (_ref8) {
var disabled = _ref8.disabled,
loading = _ref8.loading;
return disabled && !loading && (0, _styledComponents.css)(_templateObject12, _settings.grey, (0, _tools.rem)(1), _settings.grey, _settings.white);
}, function (_ref9) {
var disabled = _ref9.disabled,
loading = _ref9.loading;
return disabled && loading && (0, _styledComponents.css)(_templateObject11);
});
var LinkTag = exports.LinkTag = ButtonTag.withComponent("a");
var AnchorTag = exports.AnchorTag = _styledComponents2.default.a(_templateObject13, (0, _tools.rem)(11), (0, _tools.rem)(0.3), _settings.blue, function (_ref10) {
var width = _ref10.width,
isPending = _ref10.isPending;
return width && isPending && (0, _styledComponents.css)(_templateObject14, (0, _tools.rem)(width), (0, _tools.rem)(10), width, _tools.media.lg((0, _styledComponents.css)(_templateObject3, (0, _tools.rem)(20))));
}, function (_ref11) {
var noSpan = _ref11.noSpan;
return noSpan && (0, _styledComponents.css)(_templateObject15, (0, _tools.rem)(0.4), (0, _tools.rem)(11));
});
var AnchorSpan = exports.AnchorSpan = _styledComponents2.default.span(_templateObject16, (0, _tools.rem)(3), function (_ref12) {
var noSpan = _ref12.noSpan,
opacity = _ref12.opacity;
return noSpan && opacity && (0, _styledComponents.css)(_templateObject17, opacity, _settings.darkBlue, (0, _tools.rem)(0.4), (0, _tools.rem)(11));
});
var RouterLinkTag = ButtonTag.withComponent(function (_ref13) {
var isCallToAction = _ref13.isCallToAction,
small = _ref13.small,
props = _objectWithoutProperties(_ref13, ["isCallToAction", "small"]);
return _react2.default.createElement(_reactRouterDom.Link, props);
} // eslint-disable-line
);
exports.RouterLinkTag = RouterLinkTag;
var AnchorLinkTag = AnchorTag.withComponent(function (_ref14) {
var props = _objectWithoutProperties(_ref14, []);
return _react2.default.createElement(_reactRouterDom.Link, props);
});
exports.AnchorLinkTag = AnchorLinkTag;