@navinc/base-react-components
Version:
Nav's Pattern Library
78 lines (77 loc) • 4.5 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 styled, { css, useTheme } from 'styled-components';
import { IconButton } from './icon-button.js';
import { useIsLargerThanPhone } from './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 (_jsx(MuiTooltip, Object.assign({}, props, { title: _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)),
},
[`& .${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%;
`;
export const TooltipTargetIcon = styled(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.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 = useTheme();
const isDesktop = useIsLargerThanPhone();
const wrapperSize = size || '24px';
return (_jsx(Wrapper, { className: className, "data-testid": dataTestId ? `tooltip ${dataTestId}` : 'tooltip', size: !target ? wrapperSize : undefined, children: _jsx(InternalTooltip, Object.assign({ arrow: arrow, isDark: isDark }, props, { navTheme: navTheme, placement: placement || (isDesktop ? 'right' : 'top'), title: children, children: size ? (_jsx("span", { "data-testid": "tooltip:target", children: target || _jsx(TooltipTargetIcon, { name: iconName, size: size, type: "button" }) })) : (_jsx(StyledTooltipTarget, { "data-testid": "tooltip:target", children: target || _jsx(TooltipTargetIcon, { name: iconName, type: "button" }) })) })) }));
};
export const Tooltip = styled(_Tooltip).withConfig({ displayName: "brc-sc-Tooltip", componentId: "brc-sc-1wvapb1" }) ``;
//# sourceMappingURL=tooltip.js.map