@navinc/base-react-components
Version:
Nav's Pattern Library
108 lines (107 loc) • 6.28 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
const styled_components_1 = __importStar(require("styled-components"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const theme_js_1 = require("./theme.js");
const icon_button_js_1 = __importDefault(require("./icon-button.js"));
const getDarkText = (theme) => ((0, is_rebrand_js_1.default)(theme) ? theme.neutral400 : theme_js_1.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", Object.assign({ "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 ${(0, is_rebrand_js_1.default)(navTheme) ? navTheme.navNeutral300 : theme_js_1.theme.neutral300})`,
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.default).withConfig({ displayName: "brc-sc-TooltipTargetIcon", componentId: "brc-sc-xusywk" }) `
color: ${({ theme }) => theme.navNeutralDark};
border: none;
&:focus {
border-radius: 2px;
outline: none;
box-shadow: ${({ theme }) => (0, is_rebrand_js_1.default)(theme) ? `0 0 0 4px ${theme.navStatusPositive500}` : `0 0 0 3px ${theme.navPrimary700}`};
}
`;
const Wrapper = styled_components_1.default.span.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-lybuwu" }) `
${heightWidth}
`;
/*
MuiTooltip requires a wrapper element before the target element, in this case the Icon 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 } = _a, props = __rest(_a, ["className", "children", "iconName", "target", 'data-testid', "arrow", "isDark", "placement"]);
const navTheme = (0, styled_components_1.useTheme)();
const isDesktop = (0, useMediaQuery_1.default)(`(${navTheme.forLargerThanPhone})`);
return ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({ className: className, "data-testid": dataTestId ? `tooltip ${dataTestId}` : 'tooltip', size: !target ? '24px' : 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: (0, jsx_runtime_1.jsx)(StyledTooltipTarget, Object.assign({ "data-testid": "tooltip:target" }, { children: target || (0, jsx_runtime_1.jsx)(exports.TooltipTargetIcon, { name: iconName }) })) })) })));
};
exports.Tooltip = Tooltip;
exports.default = (0, styled_components_1.default)(exports.Tooltip).withConfig({ componentId: "brc-sc-p76kjh" }) ``;
//# sourceMappingURL=tooltip.js.map