@navinc/base-react-components
Version:
Nav's Pattern Library
104 lines (103 loc) • 6.02 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = exports.TooltipTargetIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Tooltip_1 = __importStar(require("@mui/material/Tooltip"));
const styled_components_1 = __importStar(require("styled-components"));
const icon_button_js_1 = require("./icon-button.js");
const use_media_query_1 = require("./use-media-query");
const getDarkText = (theme) => theme.navNeutral400;
const InternalTooltip = (_a) => {
var { title, children, maxWidth, minWidth, navTheme, isDark = false } = _a, props = __rest(_a, ["title", "children", "maxWidth", "minWidth", "navTheme", "isDark"]);
return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({}, props, { title: (0, jsx_runtime_1.jsx)("span", { "data-testid": "tooltip:content", children: title }), componentsProps: {
tooltip: {
sx: {
color: () => (isDark ? 'white' : getDarkText(navTheme)),
fontSize: '14px',
lineHeight: '1.5',
backgroundColor: () => (isDark ? 'black' : 'white'),
filter: () => `drop-shadow(1px 2px 4px ${navTheme.navNeutral300})`,
minWidth: () => `${minWidth || '198px'}`,
maxWidth: () => `${maxWidth || '300px'}`,
padding: '12px 16px',
'& p[class^="Copy"]': {
color: () => (isDark ? 'white' : getDarkText(navTheme)),
},
[`& .${Tooltip_1.tooltipClasses.arrow}`]: {
color: () => (isDark ? 'black' : 'white'),
fontSize: '16px',
},
},
},
}, children: children })));
};
const heightWidth = ({ size }) => (0, styled_components_1.css) `
height: ${size};
width: ${size};
`;
// Necessary rules on the parent of target element in order for tooltip to position correctly, vertically.
const StyledTooltipTarget = styled_components_1.default.span.withConfig({ displayName: "brc-sc-StyledTooltipTarget", componentId: "brc-sc-oq8x5k" }) `
display: inline-block;
height: 100%;
`;
exports.TooltipTargetIcon = (0, styled_components_1.default)(icon_button_js_1.IconButton).withConfig({ displayName: "brc-sc-TooltipTargetIcon", componentId: "brc-sc-xusywk" }) `
color: ${({ theme }) => theme.navNeutralDark};
border: none;
${heightWidth}
&:focus {
border-radius: 2px;
outline: none;
box-shadow: ${({ theme }) => `0 0 0 4px ${theme.navStatusPositive500}`};
}
`;
const Wrapper = styled_components_1.default.span.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-lybuwu" }) `
${heightWidth}
`;
/*
<span data-testid="tooltip:target">: MuiTooltip requires a wrapper element before the target element,
in this case the IconButton or 'target' component. It will add props specific to
that wrapper element. We use only <span> here because tooltip is commonly used between <p> tags.
*/
const _Tooltip = (_a) => {
var { className, children, iconName = 'actions/circle-info', target, 'data-testid': dataTestId = '', arrow = true, isDark = false, placement, size } = _a, props = __rest(_a, ["className", "children", "iconName", "target", 'data-testid', "arrow", "isDark", "placement", "size"]);
const navTheme = (0, styled_components_1.useTheme)();
const isDesktop = (0, use_media_query_1.useIsLargerThanPhone)();
const wrapperSize = size || '24px';
return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, "data-testid": dataTestId ? `tooltip ${dataTestId}` : 'tooltip', size: !target ? wrapperSize : undefined, children: (0, jsx_runtime_1.jsx)(InternalTooltip, Object.assign({ arrow: arrow, isDark: isDark }, props, { navTheme: navTheme, placement: placement || (isDesktop ? 'right' : 'top'), title: children, children: size ? ((0, jsx_runtime_1.jsx)("span", { "data-testid": "tooltip:target", children: target || (0, jsx_runtime_1.jsx)(exports.TooltipTargetIcon, { name: iconName, size: size, type: "button" }) })) : ((0, jsx_runtime_1.jsx)(StyledTooltipTarget, { "data-testid": "tooltip:target", children: target || (0, jsx_runtime_1.jsx)(exports.TooltipTargetIcon, { name: iconName, type: "button" }) })) })) }));
};
exports.Tooltip = (0, styled_components_1.default)(_Tooltip).withConfig({ displayName: "brc-sc-Tooltip", componentId: "brc-sc-1wvapb1" }) ``;
//# sourceMappingURL=tooltip.js.map