@navinc/base-react-components
Version:
Nav's Pattern Library
62 lines (61 loc) • 2.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalloutLink = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = require("./button");
const copy_1 = require("./copy");
const icon_js_1 = require("./icon.js");
const link_js_1 = require("./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_components_1.default.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_js_1.Icon} {
fill: ${({ theme, variation }) => getVariation({ theme, variation }).iconFill};
}
& > ${button_1.Button} {
color: ${({ theme, variation }) => getVariation({ theme, variation }).buttonColor};
}
`;
/**
* Alternatively, use a linkHref rather than a linkAction to navigate elsewhere.
*/
const CalloutLink = ({ iconName = 'actions/circle-info', copy, linkCopy, linkHref, linkAction, variation, }) => ((0, jsx_runtime_1.jsxs)(CalloutLinkContainer, { variation: variation, children: [(0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: iconName }), (0, jsx_runtime_1.jsx)(copy_1.Copy, { children: copy }), linkHref ? ((0, jsx_runtime_1.jsx)(link_js_1.Link, { href: linkHref, children: linkCopy })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { variation: "buttonLink", onClick: linkAction, children: linkCopy }))] }));
exports.CalloutLink = CalloutLink;
//# sourceMappingURL=callout-link.js.map