@navinc/base-react-components
Version:
Nav's Pattern Library
55 lines (54 loc) • 2.35 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.navNeutral100,
iconFill: theme.navNeutral400,
buttonColor: theme.navPrimary,
},
positive: {
backgroundColor: theme.navStatusPositive200,
iconFill: theme.navStatusPositive,
buttonColor: theme.navStatusPositive,
},
improve: {
backgroundColor: theme.navSecondary,
iconFill: theme.navSecondary600,
buttonColor: theme.navSecondary600,
},
negative: {
backgroundColor: theme.navStatusNegative200,
iconFill: theme.navStatusNegative,
buttonColor: theme.navStatusNegative,
},
information: {
backgroundColor: theme.navNeutral100,
iconFill: theme.navPrimary,
buttonColor: theme.navPrimary,
},
}[variation];
};
const CalloutLinkContainer = styled.div.withConfig({ displayName: "brc-sc-CalloutLinkContainer", componentId: "brc-sc-194ip4v" }) `
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};
}
& > ${Button} {
color: ${({ theme, variation }) => getVariation({ theme, variation }).buttonColor};
}
`;
/**
* Alternatively, use a linkHref rather than a linkAction to navigate elsewhere.
*/
export const CalloutLink = ({ iconName = 'actions/circle-info', copy, linkCopy, linkHref, linkAction, variation, }) => (_jsxs(CalloutLinkContainer, { variation: variation, children: [_jsx(Icon, { name: iconName }), _jsx(Copy, { children: copy }), linkHref ? (_jsx(Link, { href: linkHref, children: linkCopy })) : (_jsx(Button, { variation: "buttonLink", onClick: linkAction, children: linkCopy }))] }));
//# sourceMappingURL=callout-link.js.map