@navinc/base-react-components
Version:
Nav's Pattern Library
40 lines (39 loc) • 1.75 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Button from './button';
import Copy from './copy';
import Icon from './icon.js';
import Link from './link.js';
const getVariation = ({ variation = 'neutral', theme }) => {
return {
neutral: {
backgroundColor: theme.bubbleBlue100,
iconFill: theme.azure,
},
positive: {
backgroundColor: theme.seaturtleGreen100,
iconFill: theme.seaturtleGreen200,
},
improve: {
backgroundColor: theme.flounderYellow100,
iconFill: theme.flounderYellow200,
},
negative: {
backgroundColor: theme.sebastianRed100,
iconFill: theme.sebastianRed200,
},
}[variation];
};
const CalloutLink = styled.div `
display: grid;
grid-column-gap: 8px;
grid-template-columns: 24px minmax(auto, max-content) minmax(auto, max-content);
background: ${({ theme, variation }) => getVariation({ theme, variation }).backgroundColor};
padding: 12px 16px;
border-radius: 12px;
& > ${Icon} {
fill: ${({ theme, variation }) => getVariation({ theme, variation }).iconFill};
}
`;
export default ({ iconName = 'actions/circle-info', copy, linkCopy, linkHref, linkAction, variation }) => (_jsxs(CalloutLink, Object.assign({ variation: variation }, { children: [_jsx(Icon, { name: iconName }, void 0), _jsx(Copy, { children: copy }, void 0), linkHref ? (_jsx(Link, Object.assign({ href: linkHref }, { children: linkCopy }), void 0)) : (_jsx(Button, Object.assign({ variation: "buttonLink", onClick: linkAction }, { children: linkCopy }), void 0))] }), void 0));
//# sourceMappingURL=callout-link.js.map