@kiwicom/orbit-components
Version:
<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"
260 lines (213 loc) • 9.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _defaultTokens = require("../defaultTokens");
var _defaultTokens2 = _interopRequireDefault(_defaultTokens);
var _InformationCircle = require("../icons/InformationCircle");
var _InformationCircle2 = _interopRequireDefault(_InformationCircle);
var _Check = require("../icons/Check");
var _Check2 = _interopRequireDefault(_Check);
var _Alert = require("../icons/Alert");
var _Alert2 = _interopRequireDefault(_Alert);
var _AlertCircle = require("../icons/AlertCircle");
var _AlertCircle2 = _interopRequireDefault(_AlertCircle);
var _Close = require("../icons/Close");
var _Close2 = _interopRequireDefault(_Close);
var _ButtonLink = require("../ButtonLink");
var _ButtonLink2 = _interopRequireDefault(_ButtonLink);
var _TextLink = require("../TextLink");
var _consts = require("./consts");
var _getSpacingToken = require("../common/getSpacingToken");
var _getSpacingToken2 = _interopRequireDefault(_getSpacingToken);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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; }
var getTypeToken = function getTypeToken(name) {
return function (_ref) {
var _TOKENS$colorIconAler, _TOKENS$backgroundAle, _TOKENS$colorTextAler, _tokens;
var theme = _ref.theme,
type = _ref.type;
var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.TOKENS.colorIconAlert, (_TOKENS$colorIconAler = {}, _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.colorAlertIconInfo), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.colorAlertIconSuccess), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.colorAlertIconWarning), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.colorAlertIconCritical), _TOKENS$colorIconAler)), _defineProperty(_tokens, _consts.TOKENS.backgroundAlert, (_TOKENS$backgroundAle = {}, _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.INFO, theme.orbit.backgroundAlertInfo), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundAlertSuccess), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.WARNING, theme.orbit.backgroundAlertWarning), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundAlertCritical), _TOKENS$backgroundAle)), _defineProperty(_tokens, _consts.TOKENS.colorTextAlert, (_TOKENS$colorTextAler = {}, _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.colorTextAlertInfo), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextAlertSuccess), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.colorTextAlertWarning), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextAlertCritical), _TOKENS$colorTextAler)), _tokens);
return tokens[name][type];
};
};
var Icon = function Icon(_ref2) {
var icon = _ref2.icon,
type = _ref2.type;
// Icon should be boolean and TRUE
if (typeof icon === "boolean" && icon) {
if (type === _consts.TYPE_OPTIONS.INFO) {
return React.createElement(_InformationCircle2.default, null);
}
if (type === _consts.TYPE_OPTIONS.SUCCESS) {
return React.createElement(_Check2.default, null);
}
if (type === _consts.TYPE_OPTIONS.WARNING) {
return React.createElement(_Alert2.default, null);
}
if (type === _consts.TYPE_OPTIONS.CRITICAL) {
return React.createElement(_AlertCircle2.default, null);
}
}
return icon;
};
var StyledDiv = function StyledDiv(_ref3) {
var className = _ref3.className,
children = _ref3.children,
dataTest = _ref3.dataTest;
return React.createElement(
"div",
{ className: className, "data-test": dataTest },
children
);
};
var StyledAlert = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__StyledAlert"
})(["position:relative;display:flex;width:100%;padding:", ";padding-right:", ";border-radius:", ";background:", ";color:", ";font-family:", ";font-size:", ";box-sizing:border-box;margin-bottom:", ";"], function (_ref4) {
var theme = _ref4.theme,
icon = _ref4.icon;
return icon ? theme.orbit.paddingAlert + " " + theme.orbit.paddingAlertWithIcon : theme.orbit.paddingAlert;
}, function (_ref5) {
var theme = _ref5.theme,
closable = _ref5.closable;
return closable && theme.orbit.spaceXXLarge;
}, function (_ref6) {
var theme = _ref6.theme;
return theme.orbit.borderRadiusNormal;
}, getTypeToken(_consts.TOKENS.backgroundAlert), getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.fontFamily;
}, function (_ref8) {
var theme = _ref8.theme;
return theme.orbit.fontSizeTextNormal;
}, _getSpacingToken2.default);
StyledAlert.defaultProps = {
theme: _defaultTokens2.default
};
var IconContainer = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__IconContainer"
})(["flex-shrink:0;margin-right:", ";color:", ";"], function (_ref9) {
var theme = _ref9.theme;
return theme.orbit.spaceSmall;
}, getTypeToken(_consts.TOKENS.colorIconAlert));
IconContainer.defaultProps = {
theme: _defaultTokens2.default
};
var ContentWrapper = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__ContentWrapper"
})(["flex:1;display:flex;flex-direction:", ";align-items:", ";"], function (_ref10) {
var title = _ref10.title;
return title && "column";
}, function (_ref11) {
var title = _ref11.title;
return !title && "center";
});
var Title = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__Title"
})(["display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";"], function (_ref12) {
var theme = _ref12.theme,
hasChildren = _ref12.hasChildren;
return hasChildren && theme.orbit.spaceXSmall;
}, function (_ref13) {
var theme = _ref13.theme;
return theme.orbit.fontWeightBold;
}, function (_ref14) {
var theme = _ref14.theme;
return theme.orbit.lineHeightHeading;
}, function (_ref15) {
var theme = _ref15.theme;
return theme.orbit.heightIconMedium;
});
Title.defaultProps = {
theme: _defaultTokens2.default
};
var Content = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__Content"
})(["display:block;margin-bottom:", ";line-height:", ";& a,& ", "{color:", ";font-weight:", ";transition:color ", " ease-in-out;text-decoration:none;&:hover{color:", ";}}"], function (_ref16) {
var theme = _ref16.theme,
title = _ref16.title;
return title && theme.orbit.spaceXXSmall;
}, function (_ref17) {
var theme = _ref17.theme;
return theme.orbit.lineHeightText;
}, _TextLink.StyledTextLink, getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref18) {
var theme = _ref18.theme;
return theme.orbit.fontWeightMedium;
}, function (_ref19) {
var theme = _ref19.theme;
return theme.orbit.durationFast;
}, function (_ref20) {
var theme = _ref20.theme;
return theme.orbit.colorTextAlertLink;
});
Content.defaultProps = {
theme: _defaultTokens2.default
};
var CloseContainer = (0, _styledComponents2.default)(StyledDiv).withConfig({
displayName: "Alert__CloseContainer"
})(["position:absolute;top:", ";margin-top:", ";right:0;margin-right:", ";"], function (_ref21) {
var hasChildren = _ref21.hasChildren;
return hasChildren ? 0 : "50%";
}, function (_ref22) {
var hasChildren = _ref22.hasChildren,
theme = _ref22.theme;
return !hasChildren && "-" + theme.orbit.widthIconSmall;
}, function (_ref23) {
var hasChildren = _ref23.hasChildren,
theme = _ref23.theme;
return !hasChildren && theme.orbit.spaceXSmall;
});
CloseContainer.defaultProps = {
theme: _defaultTokens2.default
};
var Alert = function Alert(props) {
var _props$type = props.type,
type = _props$type === undefined ? _consts.TYPE_OPTIONS.INFO : _props$type,
title = props.title,
closable = props.closable,
icon = props.icon,
_props$onClose = props.onClose,
onClose = _props$onClose === undefined ? function () {} : _props$onClose,
children = props.children,
dataTest = props.dataTest,
spaceAfter = props.spaceAfter;
return React.createElement(
StyledAlert,
{ type: type, closable: closable, dataTest: dataTest, spaceAfter: spaceAfter },
icon && React.createElement(
IconContainer,
{ type: type },
React.createElement(Icon, { type: type, icon: icon })
),
React.createElement(
ContentWrapper,
{ title: title },
title && React.createElement(
Title,
{ hasChildren: children },
title
),
children && React.createElement(
Content,
{ title: title, type: type },
children
)
),
closable && React.createElement(
CloseContainer,
{ hasChildren: children },
React.createElement(_ButtonLink2.default, {
onClick: onClose,
size: "small",
icon: React.createElement(_Close2.default, { size: "small", color: type }),
transparent: true
})
)
);
};
exports.default = Alert;