@navinc/base-react-components
Version:
Nav's Pattern Library
85 lines (84 loc) • 3.8 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 is_rebrand_1 = __importDefault(require("./is-rebrand"));
const link_js_1 = __importDefault(require("./link.js"));
const getVariation = ({ variation = 'neutral', theme }) => {
if ((0, is_rebrand_1.default)(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];
}
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,
},
information: {
backgroundColor: theme.bubbleBlue100,
iconFill: theme.azure,
},
}[variation];
};
const CalloutLink = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CalloutLink", componentId: "brc-sc-1edmhpi" }) `
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};
}
& > ${button_1.default} {
color: ${({ theme, variation }) => ((0, is_rebrand_1.default)(theme) ? getVariation({ theme, variation }).buttonColor : '')};
}
`;
/**
* Alternatively, use a linkHref rather than a linkAction to navigate elsewhere.
*/
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 }), (0, jsx_runtime_1.jsx)(copy_1.default, { children: copy }), linkHref ? ((0, jsx_runtime_1.jsx)(link_js_1.default, Object.assign({ href: linkHref }, { children: linkCopy }))) : ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ variation: "buttonLink", onClick: linkAction }, { children: linkCopy })))] })));
//# sourceMappingURL=callout-link.js.map