@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
329 lines (286 loc) • 16 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AlertButton", {
enumerable: true,
get: function get() {
return _AlertButton.default;
}
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _convertHexToRgba = _interopRequireDefault(require("@kiwicom/orbit-design-tokens/lib/convertHexToRgba"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _InformationCircle = _interopRequireDefault(require("../icons/InformationCircle"));
var _Check = _interopRequireDefault(require("../icons/Check"));
var _Alert = _interopRequireDefault(require("../icons/Alert"));
var _AlertCircle = _interopRequireDefault(require("../icons/AlertCircle"));
var _Close = _interopRequireDefault(require("../icons/Close"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _TextLink = require("../TextLink");
var _consts = require("./consts");
var _rtl = require("../utils/rtl");
var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));
var _ListItem = require("../List/ListItem");
var _Text = require("../Text");
var _useTranslate = _interopRequireDefault(require("../hooks/useTranslate"));
var _Heading = require("../Heading");
var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));
var _AlertButton = _interopRequireDefault(require("./AlertButton"));
var getTypeToken = function getTypeToken(name) {
return function (_ref) {
var _TOKENS$colorIconAler, _TOKENS$backgroundAle, _TOKENS$colorTextAler, _TOKENS$colorTextLink, _TOKENS$colorTextLink2, _TOKENS$colorBorderAl, _tokens;
var theme = _ref.theme,
type = _ref.type;
var tokens = (_tokens = {}, (0, _defineProperty2.default)(_tokens, _consts.TOKENS.colorIconAlert, (_TOKENS$colorIconAler = {}, (0, _defineProperty2.default)(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarker), (0, _defineProperty2.default)(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarker), (0, _defineProperty2.default)(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarker), (0, _defineProperty2.default)(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarker), _TOKENS$colorIconAler)), (0, _defineProperty2.default)(_tokens, _consts.TOKENS.backgroundAlert, (_TOKENS$backgroundAle = {}, (0, _defineProperty2.default)(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.INFO, theme.orbit.backgroundAlertInfo), (0, _defineProperty2.default)(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundAlertSuccess), (0, _defineProperty2.default)(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.WARNING, theme.orbit.backgroundAlertWarning), (0, _defineProperty2.default)(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundAlertCritical), _TOKENS$backgroundAle)), (0, _defineProperty2.default)(_tokens, _consts.TOKENS.colorTextAlert, (_TOKENS$colorTextAler = {}, (0, _defineProperty2.default)(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.colorTextAlertInfo), (0, _defineProperty2.default)(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextAlertSuccess), (0, _defineProperty2.default)(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.colorTextAlertWarning), (0, _defineProperty2.default)(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextAlertCritical), _TOKENS$colorTextAler)), (0, _defineProperty2.default)(_tokens, _consts.TOKENS.colorTextLinkAlertHover, (_TOKENS$colorTextLink = {}, (0, _defineProperty2.default)(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarkHover), (0, _defineProperty2.default)(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarkHover), (0, _defineProperty2.default)(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarkHover), (0, _defineProperty2.default)(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarkActive), _TOKENS$colorTextLink)), (0, _defineProperty2.default)(_tokens, _consts.TOKENS.colorTextLinkAlertFocus, (_TOKENS$colorTextLink2 = {}, (0, _defineProperty2.default)(_TOKENS$colorTextLink2, _consts.TYPE_OPTIONS.INFO, (0, _convertHexToRgba.default)(theme.orbit.paletteBlueDarkHover, 10)), (0, _defineProperty2.default)(_TOKENS$colorTextLink2, _consts.TYPE_OPTIONS.SUCCESS, (0, _convertHexToRgba.default)(theme.orbit.paletteGreenDarkHover, 10)), (0, _defineProperty2.default)(_TOKENS$colorTextLink2, _consts.TYPE_OPTIONS.WARNING, (0, _convertHexToRgba.default)(theme.orbit.paletteOrangeDarkHover, 10)), (0, _defineProperty2.default)(_TOKENS$colorTextLink2, _consts.TYPE_OPTIONS.CRITICAL, (0, _convertHexToRgba.default)(theme.orbit.paletteRedDarkActive, 10)), _TOKENS$colorTextLink2)), (0, _defineProperty2.default)(_tokens, _consts.TOKENS.colorBorderAlert, (_TOKENS$colorBorderAl = {}, (0, _defineProperty2.default)(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueLightHover), (0, _defineProperty2.default)(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenLightHover), (0, _defineProperty2.default)(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeLightHover), (0, _defineProperty2.default)(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedLightHover), _TOKENS$colorBorderAl)), _tokens);
return tokens[name][type];
};
};
var StyledIcon = (0, _styledComponents.default)(function (_ref2) {
var icon = _ref2.icon,
type = _ref2.type,
className = _ref2.className;
// Icon should be boolean and TRUE
if (typeof icon === "boolean" && icon) {
if (type === _consts.TYPE_OPTIONS.INFO) {
return /*#__PURE__*/React.createElement(_InformationCircle.default, {
className: className,
size: "small"
});
}
if (type === _consts.TYPE_OPTIONS.SUCCESS) {
return /*#__PURE__*/React.createElement(_Check.default, {
className: className,
size: "small"
});
}
if (type === _consts.TYPE_OPTIONS.WARNING) {
return /*#__PURE__*/React.createElement(_Alert.default, {
className: className,
size: "small"
});
}
if (type === _consts.TYPE_OPTIONS.CRITICAL) {
return /*#__PURE__*/React.createElement(_AlertCircle.default, {
className: className,
size: "small"
});
}
}
if ( /*#__PURE__*/React.isValidElement(icon)) {
return /*#__PURE__*/React.cloneElement(icon, {
className: className,
size: "small"
});
}
return icon;
}).withConfig({
displayName: "Alert__StyledIcon",
componentId: "svgppc-0"
})([""]);
var StyledDiv = function StyledDiv(_ref3) {
var className = _ref3.className,
children = _ref3.children,
dataTest = _ref3.dataTest;
return /*#__PURE__*/React.createElement("div", {
className: className,
"data-test": dataTest
}, children);
};
var StyledAlert = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__StyledAlert",
componentId: "svgppc-1"
})(["position:relative;display:flex;width:100%;border-radius:", ";border:1px solid ", ";background:", ";color:", ";font-family:", ";font-size:", ";line-height:", ";box-sizing:border-box;margin-bottom:", ";padding:", ";", ""], function (_ref4) {
var theme = _ref4.theme;
return theme.orbit.borderRadiusLarge;
}, getTypeToken(_consts.TOKENS.colorBorderAlert), getTypeToken(_consts.TOKENS.backgroundAlert), getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref5) {
var theme = _ref5.theme;
return theme.orbit.fontFamily;
}, function (_ref6) {
var theme = _ref6.theme;
return theme.orbit.fontSizeTextNormal;
}, function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.lineHeightTextNormal;
}, _getSpacingToken.default, function (_ref8) {
var theme = _ref8.theme,
closable = _ref8.closable;
return closable ? (0, _rtl.rtlSpacing)("".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceLarge, " ").concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceSmall)) : theme.orbit.spaceSmall;
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";padding:", ";"], function (_ref9) {
var theme = _ref9.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref10) {
var theme = _ref10.theme,
closable = _ref10.closable;
return closable ? (0, _rtl.rtlSpacing)("".concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.paddingAlert)) : theme.orbit.paddingAlert;
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledAlert.defaultProps = {
theme: _defaultTheme.default
};
var IconContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__IconContainer",
componentId: "svgppc-2"
})(["flex-shrink:0;margin:", ";color:", ";display:", ";align-items:", ";", ""], function (_ref11) {
var theme = _ref11.theme;
return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, getTypeToken(_consts.TOKENS.colorIconAlert), function (_ref12) {
var inlineActions = _ref12.inlineActions;
return inlineActions && "flex";
}, function (_ref13) {
var inlineActions = _ref13.inlineActions;
return inlineActions && "center";
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["margin:", ";", "{width:", ";height:", ";}"], function (_ref14) {
var theme = _ref14.theme;
return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceSmall, " 0 0"));
}, StyledIcon, function (_ref15) {
var theme = _ref15.theme;
return theme.orbit.widthIconMedium;
}, function (_ref16) {
var theme = _ref16.theme;
return theme.orbit.heightIconMedium;
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
IconContainer.defaultProps = {
theme: _defaultTheme.default
};
var ContentWrapper = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__ContentWrapper",
componentId: "svgppc-3"
})(["flex:1;display:flex;flex-direction:", ";align-items:", ";justify-content:", ";"], function (_ref17) {
var title = _ref17.title,
inlineActions = _ref17.inlineActions;
return title && (inlineActions ? "row" : "column");
}, function (_ref18) {
var title = _ref18.title;
return !title && "center";
}, function (_ref19) {
var inlineActions = _ref19.inlineActions;
return inlineActions && "space-between";
});
var Title = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__Title",
componentId: "svgppc-4"
})(["color:", ";display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";"], getTypeToken(_consts.TOKENS.colorIconAlert), function (_ref20) {
var theme = _ref20.theme,
hasChildren = _ref20.hasChildren,
inlineActions = _ref20.inlineActions;
return hasChildren && (inlineActions ? "0" : theme.orbit.spaceXXSmall);
}, function (_ref21) {
var theme = _ref21.theme;
return theme.orbit.fontWeightBold;
}, function (_ref22) {
var theme = _ref22.theme;
return theme.orbit.lineHeightHeading;
}, function (_ref23) {
var theme = _ref23.theme;
return theme.orbit.heightIconMedium;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Title.defaultProps = {
theme: _defaultTheme.default
};
var Content = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__Content",
componentId: "svgppc-5"
})(["display:block;width:", ";& a,& ", "{color:", ";font-weight:", ";transition:color ", " ease-in-out;&:hover,&:focus,&:active{color:", ";}}& ", ",", ",", "{color:", ";}"], function (_ref24) {
var inlineActions = _ref24.inlineActions;
return !inlineActions && "100%";
}, _TextLink.StyledTextLink, getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref25) {
var theme = _ref25.theme;
return theme.orbit.fontWeightMedium;
}, function (_ref26) {
var theme = _ref26.theme;
return theme.orbit.durationFast;
}, getTypeToken(_consts.TOKENS.colorTextLinkAlertHover), _ListItem.Item, _Text.StyledText, _Heading.StyledHeading, getTypeToken(_consts.TOKENS.colorTextAlert)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Content.defaultProps = {
theme: _defaultTheme.default
};
var CloseContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
displayName: "Alert__CloseContainer",
componentId: "svgppc-6"
})(["position:absolute;top:", ";margin-top:", ";", ":0;margin-", ":", ";"], function (_ref27) {
var hasChildren = _ref27.hasChildren;
return hasChildren ? 0 : "50%";
}, function (_ref28) {
var hasChildren = _ref28.hasChildren,
theme = _ref28.theme;
return !hasChildren && "-".concat(theme.orbit.widthIconSmall);
}, _rtl.right, _rtl.right, function (_ref29) {
var hasChildren = _ref29.hasChildren,
theme = _ref29.theme;
return !hasChildren && theme.orbit.spaceXSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
CloseContainer.defaultProps = {
theme: _defaultTheme.default
};
var AlertCloseButton = function AlertCloseButton(_ref30) {
var hasChildren = _ref30.hasChildren,
dataTest = _ref30.dataTest,
onClick = _ref30.onClick,
icon = _ref30.icon;
var translate = (0, _useTranslate.default)();
return /*#__PURE__*/React.createElement(CloseContainer, {
hasChildren: hasChildren
}, /*#__PURE__*/React.createElement(_ButtonLink.default, {
dataTest: dataTest,
onClick: onClick,
size: "small",
iconLeft: icon,
type: "secondary",
title: translate("button_close")
}));
};
var Alert = function Alert(props) {
var _props$type = props.type,
type = _props$type === void 0 ? _consts.TYPE_OPTIONS.INFO : _props$type,
title = props.title,
icon = props.icon,
closable = props.closable,
_props$onClose = props.onClose,
onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
children = props.children,
dataTest = props.dataTest,
spaceAfter = props.spaceAfter,
_props$inlineActions = props.inlineActions,
inlineActions = _props$inlineActions === void 0 ? false : _props$inlineActions;
return /*#__PURE__*/React.createElement(StyledAlert, {
type: type,
icon: icon,
closable: closable,
dataTest: dataTest,
spaceAfter: spaceAfter
}, icon && /*#__PURE__*/React.createElement(IconContainer, {
type: type,
inlineActions: inlineActions
}, /*#__PURE__*/React.createElement(StyledIcon, {
type: type,
icon: icon
})), /*#__PURE__*/React.createElement(ContentWrapper, {
title: title,
inlineActions: inlineActions
}, title && /*#__PURE__*/React.createElement(Title, {
type: type,
hasChildren: children,
inlineActions: inlineActions
}, title), children && !inlineActions && /*#__PURE__*/React.createElement(Content, {
title: title,
type: type
}, children), inlineActions && /*#__PURE__*/React.createElement(Content, {
title: title,
type: type,
inlineActions: inlineActions
}, inlineActions)), closable && /*#__PURE__*/React.createElement(AlertCloseButton, {
hasChildren: children,
dataTest: _consts.CLOSE_BUTTON_DATA_TEST,
onClick: onClose,
icon: /*#__PURE__*/React.createElement(_Close.default, {
size: "small",
color: type
})
}));
};
var _default = Alert;
exports.default = _default;