@navinc/base-react-components
Version:
Nav's Pattern Library
69 lines (68 loc) • 3.13 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 { Button } from './button.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: 'navSecondary',
icon: 'navSecondary600',
},
neutral: {
bgColor: 'navNeutral100',
icon: 'navNeutral400',
},
};
// ensure variations is correct type
variations;
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-125gry8" }) `
fill: ${({ type = 'neutral', theme }) => { var _a; return theme[(_a = variations[type]) === null || _a === void 0 ? void 0 : _a.icon]; }};
`;
const CardInsightContent = styled.div.withConfig({ displayName: "brc-sc-CardInsightContent", componentId: "brc-sc-62hvzn" }) `
display: flex;
flex-direction: column;
align-items: flex-start;
& > ${Link}, & > ${Button} {
width: fit-content;
margin-top: 4px;
}
`;
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; return theme[(_a = variations[type]) === null || _a === void 0 ? void 0 : _a.bgColor]; }};
display: flex;
flex-direction: row;
& > ${StyledIcon} {
min-width: 24px;
margin-right: 8px;
}
`;
const _CardInsight = ({ action, actionHref, actionLabel = '', isActionLoading, className, copy, icon, shouldOpenNewTab, type = 'neutral', title, 'data-testid': dataTestId = 'card-insight', }) => {
const actionElement = () => {
if (actionHref) {
return (_jsx(Link, { href: actionHref, target: shouldOpenNewTab ? '_blank' : undefined, onClick: action, bold: true, "data-testid": `${dataTestId}:action`, rel: "noreferrer", children: actionLabel }));
}
if (action) {
return (_jsx(Button, { onClick: action, "data-testid": `${dataTestId}:action`, variation: "buttonLink", isLoading: isActionLoading, children: actionLabel }));
}
return null;
};
return (_jsxs(StyledInsight, { type: type, className: className, "data-testid": dataTestId, children: [icon && _jsx(StyledIcon, { type: type, name: icon }), _jsxs(CardInsightContent, { children: [title && (_jsx(Title, { bold: true, "data-testid": `${dataTestId}:title`, children: title })), copy && _jsx(Copy, { "data-testid": `${dataTestId}:copy`, children: copy }), actionLabel && actionElement()] })] }));
};
export const CardInsight = styled(_CardInsight).withConfig({ displayName: "brc-sc-CardInsight", componentId: "brc-sc-64jq1m" }) ``;
//# sourceMappingURL=card-insight.js.map