@navinc/base-react-components
Version:
Nav's Pattern Library
75 lines • 4.39 kB
JavaScript
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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import MuiTooltip, { tooltipClasses } from '@mui/material/Tooltip';
import useMediaQuery from '@mui/material/useMediaQuery';
import styled, { css, useTheme } from 'styled-components';
import Icon from './icon.js';
import isRebrand from './is-rebrand.js';
import { theme as navBlue } from './theme.js';
const getDarkText = (theme) => (isRebrand(theme) ? theme.neutral400 : navBlue.navNeutral400);
const InternalTooltip = (_a) => {
var { title, children, maxWidth, minWidth, navTheme, isDark = false } = _a, props = __rest(_a, ["title", "children", "maxWidth", "minWidth", "navTheme", "isDark"]);
return (_jsx(MuiTooltip, Object.assign({}, props, { title: _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 ${isRebrand(navTheme) ? navTheme.navNeutral300 : navBlue.neutral300})`,
minWidth: () => `${minWidth || '198px'}`,
maxWidth: () => `${maxWidth || '300px'}`,
padding: '12px 16px',
'& p[class^="Copy"]': {
color: () => (isDark ? 'white' : getDarkText(navTheme)),
},
[`& .${tooltipClasses.arrow}`]: {
color: () => (isDark ? 'black' : 'white'),
fontSize: '16px',
},
},
},
} }, { children: children })));
};
const heightWidth = ({ size }) => css `
height: ${size};
width: ${size};
`;
// Necessary rules on the parent of target element in order for tooltip to position correctly, vertically.
const StyledTooltipTarget = styled.span.withConfig({ displayName: "brc-sc-StyledTooltipTarget", componentId: "brc-sc-oq8x5k" }) `
display: inline-block;
height: 100%;
`;
const TabbableIcon = styled(Icon).withConfig({ displayName: "brc-sc-TabbableIcon", componentId: "brc-sc-iiwe5f" }) `
&:focus {
border-radius: 2px;
outline: none;
box-shadow: ${({ theme }) => isRebrand(theme) ? `0 0 0 4px ${theme.navStatusPositive500}` : `0 0 0 3px ${theme.navPrimary700}`};
}
`;
const Wrapper = styled.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.
*/
export 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 = useTheme();
const isDesktop = useMediaQuery(`(${navTheme.forLargerThanPhone})`);
return (_jsx(Wrapper, Object.assign({ className: className, "data-testid": dataTestId ? `tooltip ${dataTestId}` : 'tooltip', size: !target ? '24px' : undefined }, { children: _jsx(InternalTooltip, Object.assign({ arrow: arrow, isDark: isDark }, props, { navTheme: navTheme, placement: placement || (isDesktop ? 'right' : 'top'), title: children }, { children: _jsx(StyledTooltipTarget, Object.assign({ "data-testid": "tooltip:target" }, { children: target || _jsx(TabbableIcon, { tabIndex: 0, name: iconName }) })) })) })));
};
export default styled(Tooltip).withConfig({ componentId: "brc-sc-p76kjh" }) ``;
//# sourceMappingURL=tooltip.js.map