@activecollab/components
Version:
ActiveCollab Components
57 lines (56 loc) • 2.25 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
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 {
type = "default",
children,
showIcon,
icon,
title = null,
action = null,
...rest
} = _ref;
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