@activecollab/components
Version:
ActiveCollab Components
60 lines (59 loc) • 2.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["type", "children", "showIcon", "icon", "title", "action"];
import React from "react";
import { StyledInfoBoxContainer, StyledInfoBoxHeader, StyledInfoBoxWrapper, SyledInfoBoxInnerHeader } from "./Styles";
import { colors, aiColors } from "../../utils";
import { CheckboxBlankTogglerIcon, CloseCircleIcon, InfoIcon } from "../Icons";
import { Body2 } from "../Typography";
export const InfoBox = _ref => {
let _ref$type = _ref.type,
type = _ref$type === void 0 ? "default" : _ref$type,
children = _ref.children,
showIcon = _ref.showIcon,
icon = _ref.icon,
_ref$title = _ref.title,
title = _ref$title === void 0 ? null : _ref$title,
_ref$action = _ref.action,
action = _ref$action === void 0 ? null : _ref$action,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const statusColors = {
success: colors.greenSuccess.color,
warning: colors.redAlert.color,
note: colors.yellowWarning.color,
default: colors.blueSky.color,
neutral: colors.gray.color,
ai: aiColors.aiGradient.color
};
// https://davidwalsh.name/hex-opacity
const opacity = "1A";
return /*#__PURE__*/React.createElement(StyledInfoBoxWrapper, _extends({
$color: "" + statusColors[type],
$opacity: opacity,
$type: type
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/React.createElement("span", null, icon && /*#__PURE__*/React.isValidElement(icon) ? (/*#__PURE__*/React.cloneElement(icon, {
fill: statusColors[type],
width: 18
})) : type === "success" ? /*#__PURE__*/React.createElement(CheckboxBlankTogglerIcon, {
fill: statusColors[type],
width: 18
}) : type === "warning" ? /*#__PURE__*/React.createElement(CloseCircleIcon, {
fill: statusColors[type],
width: 18
}) : type === "ai" ? /*#__PURE__*/React.createElement(InfoIcon, {
gradient: statusColors[type],
width: 18
}) : type === "note" || type === "default" ? /*#__PURE__*/React.createElement(InfoIcon, {
fill: statusColors[type],
width: 18
}) : /*#__PURE__*/React.createElement(InfoIcon, {
fill: statusColors["neutral"],
width: 18
})), /*#__PURE__*/React.createElement(StyledInfoBoxHeader, {
$hasTitle: title ? true : false
}, /*#__PURE__*/React.createElement(SyledInfoBoxInnerHeader, null, typeof title === "string" && title ? /*#__PURE__*/React.createElement(Body2, {
weight: "bold",
lineHeight: "loose"
}, title) : title, action), children)));
};
//# sourceMappingURL=InfoBox.js.map