@navinc/base-react-components
Version:
Nav's Pattern Library
72 lines (71 loc) • 3.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardInsight = exports.StyledInsight = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const link_js_1 = __importDefault(require("./link.js"));
const copy_js_1 = __importDefault(require("./copy.js"));
const icon_js_1 = __importDefault(require("./icon.js"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const Title = (0, styled_components_1.default)(copy_js_1.default).withConfig({ displayName: "brc-sc-Title", componentId: "brc-sc-1iwcy9h" }) `
display: flex;
align-items: center;
`;
const variations = {
positive: {
bgColor: 'navStatusPositive200',
icon: 'navStatusPositive',
},
negative: {
bgColor: 'navStatusNegative200',
icon: 'navStatusNegative',
},
improve: {
bgColor: 'navSecondary200',
icon: 'navSecondary',
},
neutral: {
bgColor: 'navNeutral100',
icon: 'navNeutral400',
},
};
const StyledIcon = (0, styled_components_1.default)(icon_js_1.default).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-125gry8" }) `
fill: ${({ type = 'neutral', theme }) => {
var _a;
if ((0, is_rebrand_js_1.default)(theme))
return variations[type].icon;
return (_a = { positive: theme.mermaidGreen500, improve: theme.flounderYellow200 }[type]) !== null && _a !== void 0 ? _a : theme.bubbleBlue500;
}};
`;
const CardInsightContent = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CardInsightContent", componentId: "brc-sc-62hvzn" }) `
display: flex;
flex-direction: column;
`;
exports.StyledInsight = styled_components_1.default.aside.withConfig({ displayName: "brc-sc-StyledInsight", componentId: "brc-sc-1ro4obq" }) `
padding: 16px;
border-radius: 4px;
overflow: hidden;
background-color: ${({ type = 'neutral', theme }) => {
var _a;
if ((0, is_rebrand_js_1.default)(theme))
return variations[type].bgColor;
return (_a = { improve: theme.flounderYellow100, positive: theme.mermaidGreen100 }[type]) !== null && _a !== void 0 ? _a : theme.bubbleBlue100;
}};
display: flex;
flex-direction: row;
& > ${StyledIcon} {
min-width: 24px;
margin-right: 8px;
}
`;
const CardInsight = ({ action, actionHref, actionLabel = '', className, copy, icon, shouldOpenNewTab, type = 'neutral', title, }) => {
const hasAction = !!(action || actionHref);
return ((0, jsx_runtime_1.jsxs)(exports.StyledInsight, Object.assign({ type: type, className: className }, { children: [icon && (0, jsx_runtime_1.jsx)(StyledIcon, { type: type, name: icon }), (0, jsx_runtime_1.jsxs)(CardInsightContent, { children: [title && (0, jsx_runtime_1.jsx)(Title, Object.assign({ bold: true }, { children: title })), copy && (0, jsx_runtime_1.jsx)(copy_js_1.default, { children: copy }), hasAction && ((0, jsx_runtime_1.jsx)(link_js_1.default, Object.assign({}, (shouldOpenNewTab ? { href: actionHref } : { to: actionHref }), { target: shouldOpenNewTab ? '_blank' : undefined, onClick: action, bold: true }, { children: actionLabel })))] })] })));
};
exports.CardInsight = CardInsight;
const StyledCardInsight = (0, styled_components_1.default)(exports.CardInsight).withConfig({ displayName: "brc-sc-StyledCardInsight", componentId: "brc-sc-rq5oke" }) ``;
exports.default = StyledCardInsight;
//# sourceMappingURL=card-insight.js.map