@navinc/base-react-components
Version:
Nav's Pattern Library
65 lines (64 loc) • 2.87 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Link from './link.js';
import Copy from './copy.js';
import Icon from './icon.js';
import isRebrand from './is-rebrand.js';
const Title = styled(Copy).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 = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-125gry8" }) `
fill: ${({ type = 'neutral', theme }) => {
var _a;
if (isRebrand(theme))
return variations[type].icon;
return (_a = { positive: theme.mermaidGreen500, improve: theme.flounderYellow200 }[type]) !== null && _a !== void 0 ? _a : theme.bubbleBlue500;
}};
`;
const CardInsightContent = styled.div.withConfig({ displayName: "brc-sc-CardInsightContent", componentId: "brc-sc-62hvzn" }) `
display: flex;
flex-direction: column;
`;
export const StyledInsight = styled.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 (isRebrand(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;
}
`;
export const CardInsight = ({ action, actionHref, actionLabel = '', className, copy, icon, shouldOpenNewTab, type = 'neutral', title, }) => {
const hasAction = !!(action || actionHref);
return (_jsxs(StyledInsight, Object.assign({ type: type, className: className }, { children: [icon && _jsx(StyledIcon, { type: type, name: icon }), _jsxs(CardInsightContent, { children: [title && _jsx(Title, Object.assign({ bold: true }, { children: title })), copy && _jsx(Copy, { children: copy }), hasAction && (_jsx(Link, Object.assign({}, (shouldOpenNewTab ? { href: actionHref } : { to: actionHref }), { target: shouldOpenNewTab ? '_blank' : undefined, onClick: action, bold: true }, { children: actionLabel })))] })] })));
};
const StyledCardInsight = styled(CardInsight).withConfig({ displayName: "brc-sc-StyledCardInsight", componentId: "brc-sc-rq5oke" }) ``;
export default StyledCardInsight;
//# sourceMappingURL=card-insight.js.map