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