backpack-ui
Version:
Lonely Planet's Components
316 lines (261 loc) • 8.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _radium = require("radium");
var _radium2 = _interopRequireDefault(_radium);
var _classnames = require("classnames");
var _classnames2 = _interopRequireDefault(_classnames);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _dimensions = require("../../styles/dimensions");
var _dimensions2 = _interopRequireDefault(_dimensions);
var _fonts = require("../../styles/fonts");
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _typography = require("../../styles/typography");
var _zIndex = require("../../styles/zIndex");
var _zIndex2 = _interopRequireDefault(_zIndex);
var _color = require("../../utils/color");
var _grid = require("../../utils/grid");
var _icon = require("../../utils/icon");
var _icon2 = _interopRequireDefault(_icon);
var _mixins = require("../../utils/mixins");
var _propTypes3 = require("../../utils/propTypes");
var _propTypes4 = _interopRequireDefault(_propTypes3);
var _icon3 = require("../icon");
var _icon4 = _interopRequireDefault(_icon3);
var _createQAHook = require("../../utils/createQAHook");
var _createQAHook2 = _interopRequireDefault(_createQAHook);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var height = 56;
var padding = 16;
var translateY = (padding + height) / _typography.fontSizeUppercase;
var styles = {
container: {
default: {
alignItems: "center",
borderRadius: 4 / _typography.fontSizeUppercase + "em",
color: _colors2.default.textOverlay,
display: "flex",
fontFamily: _fonts.benton,
fontSize: _typography.fontSizeUppercase + "px",
fontWeight: _typography.fontWeightMedium,
lineHeight: 14 / _typography.fontSizeUppercase,
maxWidth: (0, _grid.span)(6, "static"),
minHeight: height + "px",
minWidth: _dimensions2.default.minWidth - padding * 2 + "px",
paddingBottom: 8 / _typography.fontSizeUppercase + "em",
paddingLeft: padding / _typography.fontSizeUppercase + "em",
paddingRight: padding / _typography.fontSizeUppercase + "em",
paddingTop: 9 / _typography.fontSizeUppercase + "em",
position: "relative",
transition: "opacity " + _timing2.default.fast + " ease-in-out,\n transform " + _timing2.default.fast + " ease-in-out,\n visibility " + _timing2.default.fast + " ease-in-out",
visibility: "visible",
width: "calc(100vw - " + padding * 2 + "px)",
zIndex: _zIndex2.default.toast
},
invisibleBottom: {
opacity: 0,
transform: "translateY(" + translateY + "em)",
visibility: "hidden"
},
invisibleTop: {
opacity: 0,
transform: "translateY(" + translateY * -1 + "em)",
visibility: "hidden"
},
visible: {
opacity: 1,
tranform: "translateY(0)"
},
affixed: {
left: 0,
marginLeft: "auto",
marginRight: "auto",
position: "fixed",
right: 0
}
},
text: {
marginRight: padding / _typography.fontSizeUppercase + "em"
},
icon: {
display: "inline-block",
flexShrink: 0,
fontSize: 24 / _typography.fontSizeUppercase + "em",
marginRight: padding / 24 + "em"
},
button: {
backgroundColor: "transparent",
border: 0,
color: "currentColor",
cursor: "pointer",
display: "block",
flexShrink: 0,
marginLeft: "auto",
textTransform: "uppercase",
transition: "opacity " + _timing2.default.fast + " ease-in-out",
":hover": {
opacity: 0.8
},
":active": {
opacity: 0.8
},
":focus": (0, _extends3.default)({}, {
opacity: 0.8
}, (0, _mixins.outline)())
},
onClickButton: {
marginRight: -8 / _typography.fontSizeUppercase + "em",
padding: "15px 8px 12px"
},
onCloseButton: {
fontSize: 10 / _typography.fontSizeUppercase + "em",
height: 24 / 10 + "em",
marginRight: -8 / 10 + "em",
width: 24 / 10 + "em"
},
onCloseIcon: {
stroke: "currentColor",
strokeWidth: "2px"
}
};
var messageTypes = {
error: {
color: _colors2.default.accentRed,
icon: "ToastError",
title: "Error!"
},
info: {
color: _colors2.default.accentBlue,
icon: "ToastInfo",
title: "Information"
},
success: {
color: _colors2.default.accentGreen,
icon: "ToastSuccess",
title: "Success!"
},
warning: {
color: _colors2.default.accentYellow,
icon: "ToastWarning",
title: "Warning!"
}
};
var Toast = function Toast(_ref) {
var affixed = _ref.affixed,
buttonLabel = _ref.buttonLabel,
children = _ref.children,
direction = _ref.direction,
onClick = _ref.onClick,
onClose = _ref.onClose,
style = _ref.style,
title = _ref.title,
type = _ref.type,
url = _ref.url,
visible = _ref.visible,
className = _ref.className,
qaHook = _ref.qaHook;
var Element = url ? "a" : "button";
return _react2.default.createElement(
"div",
{
className: (0, _classnames2.default)("Toast", className),
key: "toastElement",
"aria-describedby": "toastMessage",
"aria-hidden": !visible,
"aria-labelledby": "toastTitle",
"aria-live": "assertive",
role: "alertdialog",
style: [styles.container.default, type && {
backgroundColor: (0, _color.rgba)(messageTypes[type].color, 0.98),
boxShadow: "0 4px 6px " + (0, _color.rgba)(messageTypes[type].color, 0.25)
}, type === "warning" && {
color: _colors2.default.textPrimary
}, visible && styles.container.visible, !visible && direction === "bottom" && styles.container.invisibleBottom, !visible && direction === "top" && styles.container.invisibleTop, affixed && direction === "bottom" && (0, _extends3.default)({}, styles.container.affixed, { bottom: padding + "px" }), affixed && direction === "top" && (0, _extends3.default)({}, styles.container.affixed, { top: padding + "px" }), style]
},
_react2.default.createElement(_radium.Style, {
scopeSelector: ".Toast",
rules: {
mediaQueries: {
"(prefers-reduced-motion)": {
transform: "translateY(0) !important"
}
}
}
}),
type && (0, _icon2.default)(messageTypes[type].icon, {
ariaHidden: true,
style: styles.icon
}),
_react2.default.createElement(
"div",
{ style: styles.text, role: "document", tabIndex: "0" },
_react2.default.createElement(
"div",
{ id: "toastTitle" },
title || messageTypes[type].title
),
_react2.default.createElement(
"div",
{ id: "toastMessage" },
children
)
),
onClick && buttonLabel && _react2.default.createElement(
"button",
{
onClick: onClick,
style: [styles.button, styles.onClickButton]
},
buttonLabel
),
!onClick && _react2.default.createElement(
Element,
{
href: url,
onClick: onClose,
style: [styles.button, url ? styles.onClickButton : styles.onCloseButton],
title: "Close",
"data-testid": qaHook ? (0, _createQAHook2.default)("toast", "toast", "" + (Element === "a" ? "link" : Element)) : null
},
url ? buttonLabel : _react2.default.createElement(_icon4.default.Close, { title: "Close", style: styles.onCloseIcon })
)
);
};
Toast.propTypes = {
children: _propTypes2.default.string.isRequired,
type: _propTypes2.default.oneOf(["error", "info", "success", "warning"]).isRequired,
affixed: _propTypes2.default.bool,
buttonLabel: _propTypes2.default.string,
direction: _propTypes2.default.oneOf(["top", "bottom"]),
onClick: _propTypes2.default.func,
onClose: _propTypes2.default.func,
style: _propTypes4.default.style,
title: _propTypes2.default.string,
url: _propTypes2.default.string,
visible: _propTypes2.default.bool,
className: _propTypes2.default.string,
qaHook: _propTypes2.default.bool
};
Toast.defaultProps = {
affixed: false,
buttonLabel: null,
direction: "bottom",
onClick: null,
onClose: null,
style: null,
title: null,
url: null,
visible: false,
className: null,
qaHook: false
};
exports.default = (0, _radium2.default)(Toast);