@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.
286 lines (272 loc) • 13.5 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import styled, { css } from "styled-components";
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba";
import defaultTheme from "../defaultTheme";
import InformationCircle from "../icons/InformationCircle";
import Check from "../icons/Check";
import AlertTriangle from "../icons/Alert";
import AlertCircle from "../icons/AlertCircle";
import Close from "../icons/Close";
import ButtonLink from "../ButtonLink";
import { StyledTextLink } from "../TextLink";
import { TYPE_OPTIONS, TOKENS, CLOSE_BUTTON_DATA_TEST } from "./consts";
import { rtlSpacing, right } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import { Item } from "../List/ListItem";
import { StyledText } from "../Text";
import useTranslate from "../hooks/useTranslate";
import { StyledHeading } from "../Heading";
import media from "../utils/mediaQuery";
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 = {}, _defineProperty(_tokens, TOKENS.colorIconAlert, (_TOKENS$colorIconAler = {}, _defineProperty(_TOKENS$colorIconAler, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarker), _defineProperty(_TOKENS$colorIconAler, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarker), _defineProperty(_TOKENS$colorIconAler, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarker), _defineProperty(_TOKENS$colorIconAler, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarker), _TOKENS$colorIconAler)), _defineProperty(_tokens, TOKENS.backgroundAlert, (_TOKENS$backgroundAle = {}, _defineProperty(_TOKENS$backgroundAle, TYPE_OPTIONS.INFO, theme.orbit.backgroundAlertInfo), _defineProperty(_TOKENS$backgroundAle, TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundAlertSuccess), _defineProperty(_TOKENS$backgroundAle, TYPE_OPTIONS.WARNING, theme.orbit.backgroundAlertWarning), _defineProperty(_TOKENS$backgroundAle, TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundAlertCritical), _TOKENS$backgroundAle)), _defineProperty(_tokens, TOKENS.colorTextAlert, (_TOKENS$colorTextAler = {}, _defineProperty(_TOKENS$colorTextAler, TYPE_OPTIONS.INFO, theme.orbit.colorTextAlertInfo), _defineProperty(_TOKENS$colorTextAler, TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextAlertSuccess), _defineProperty(_TOKENS$colorTextAler, TYPE_OPTIONS.WARNING, theme.orbit.colorTextAlertWarning), _defineProperty(_TOKENS$colorTextAler, TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextAlertCritical), _TOKENS$colorTextAler)), _defineProperty(_tokens, TOKENS.colorTextLinkAlertHover, (_TOKENS$colorTextLink = {}, _defineProperty(_TOKENS$colorTextLink, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarkHover), _defineProperty(_TOKENS$colorTextLink, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarkHover), _defineProperty(_TOKENS$colorTextLink, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarkHover), _defineProperty(_TOKENS$colorTextLink, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarkActive), _TOKENS$colorTextLink)), _defineProperty(_tokens, TOKENS.colorTextLinkAlertFocus, (_TOKENS$colorTextLink2 = {}, _defineProperty(_TOKENS$colorTextLink2, TYPE_OPTIONS.INFO, convertHexToRgba(theme.orbit.paletteBlueDarkHover, 10)), _defineProperty(_TOKENS$colorTextLink2, TYPE_OPTIONS.SUCCESS, convertHexToRgba(theme.orbit.paletteGreenDarkHover, 10)), _defineProperty(_TOKENS$colorTextLink2, TYPE_OPTIONS.WARNING, convertHexToRgba(theme.orbit.paletteOrangeDarkHover, 10)), _defineProperty(_TOKENS$colorTextLink2, TYPE_OPTIONS.CRITICAL, convertHexToRgba(theme.orbit.paletteRedDarkActive, 10)), _TOKENS$colorTextLink2)), _defineProperty(_tokens, TOKENS.colorBorderAlert, (_TOKENS$colorBorderAl = {}, _defineProperty(_TOKENS$colorBorderAl, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueLightHover), _defineProperty(_TOKENS$colorBorderAl, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenLightHover), _defineProperty(_TOKENS$colorBorderAl, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeLightHover), _defineProperty(_TOKENS$colorBorderAl, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedLightHover), _TOKENS$colorBorderAl)), _tokens);
return tokens[name][type];
};
};
var StyledIcon = styled(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 === TYPE_OPTIONS.INFO) {
return /*#__PURE__*/React.createElement(InformationCircle, {
className: className,
size: "small"
});
}
if (type === TYPE_OPTIONS.SUCCESS) {
return /*#__PURE__*/React.createElement(Check, {
className: className,
size: "small"
});
}
if (type === TYPE_OPTIONS.WARNING) {
return /*#__PURE__*/React.createElement(AlertTriangle, {
className: className,
size: "small"
});
}
if (type === TYPE_OPTIONS.CRITICAL) {
return /*#__PURE__*/React.createElement(AlertCircle, {
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 = styled(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(TOKENS.colorBorderAlert), getTypeToken(TOKENS.backgroundAlert), getTypeToken(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, function (_ref8) {
var theme = _ref8.theme,
closable = _ref8.closable;
return closable ? rtlSpacing("".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceLarge, " ").concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceSmall)) : theme.orbit.spaceSmall;
}, media.tablet(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 ? rtlSpacing("".concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.paddingAlert)) : theme.orbit.paddingAlert;
})));
StyledAlert.defaultProps = {
theme: defaultTheme
};
var IconContainer = styled(StyledDiv).withConfig({
displayName: "Alert__IconContainer",
componentId: "svgppc-2"
})(["flex-shrink:0;margin:", ";color:", ";display:", ";align-items:", ";", ""], function (_ref11) {
var theme = _ref11.theme;
return rtlSpacing("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, getTypeToken(TOKENS.colorIconAlert), function (_ref12) {
var inlineActions = _ref12.inlineActions;
return inlineActions && "flex";
}, function (_ref13) {
var inlineActions = _ref13.inlineActions;
return inlineActions && "center";
}, media.tablet(css(["margin:", ";", "{width:", ";height:", ";}"], function (_ref14) {
var theme = _ref14.theme;
return 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;
})));
IconContainer.defaultProps = {
theme: defaultTheme
};
var ContentWrapper = styled(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 = styled(StyledDiv).withConfig({
displayName: "Alert__Title",
componentId: "svgppc-4"
})(["color:", ";display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";"], getTypeToken(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;
});
Title.defaultProps = {
theme: defaultTheme
};
var Content = styled(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%";
}, StyledTextLink, getTypeToken(TOKENS.colorTextAlert), function (_ref25) {
var theme = _ref25.theme;
return theme.orbit.fontWeightMedium;
}, function (_ref26) {
var theme = _ref26.theme;
return theme.orbit.durationFast;
}, getTypeToken(TOKENS.colorTextLinkAlertHover), Item, StyledText, StyledHeading, getTypeToken(TOKENS.colorTextAlert));
Content.defaultProps = {
theme: defaultTheme
};
var CloseContainer = styled(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);
}, right, right, function (_ref29) {
var hasChildren = _ref29.hasChildren,
theme = _ref29.theme;
return !hasChildren && theme.orbit.spaceXSmall;
});
CloseContainer.defaultProps = {
theme: defaultTheme
};
var AlertCloseButton = function AlertCloseButton(_ref30) {
var hasChildren = _ref30.hasChildren,
dataTest = _ref30.dataTest,
onClick = _ref30.onClick,
icon = _ref30.icon;
var translate = useTranslate();
return /*#__PURE__*/React.createElement(CloseContainer, {
hasChildren: hasChildren
}, /*#__PURE__*/React.createElement(ButtonLink, {
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 ? 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: CLOSE_BUTTON_DATA_TEST,
onClick: onClose,
icon: /*#__PURE__*/React.createElement(Close, {
size: "small",
color: type
})
}));
};
export { default as AlertButton } from "./AlertButton";
export default Alert;