@navinc/base-react-components/dist/helper.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Button from './button.js';
import Copy from './copy.js';
import Icon from './icon.js';
import PropTypes from 'prop-types';
import isRebrand from './is-rebrand.js';
export const HelperIcon = styled(Icon).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-egbq1p" }) `
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => (isRebrand(theme) ? theme.navNeutral400 : theme.neutral400)};
`;
export const HelperDescription = styled(Copy).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-HelperDescription", componentId: "brc-sc-rn7c91" }) `
  color: inherit;
`;
const getHelperItemColor = (theme, isLink) => {
    if (isRebrand(theme))
        return !isLink && theme.navNeutral400;
    return !isLink && theme.neutral400;
};
export const HelperItem = styled.div.attrs(({ isLink }) => isLink && { as: Button, variation: 'buttonLink', type: 'button' }).withConfig({ displayName: "brc-sc-HelperItem", componentId: "brc-sc-34z9x7" }) `
  display: grid;
  padding-top: 4px;
  grid-template-columns: min-content 1fr;
  grid-gap: 4px;
  text-align: left;
  ${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}
  color: ${({ theme, isLink }) => getHelperItemColor(theme, isLink)}
`;
/**
 * Helper is a tooltip component
 *
 * @returns ReactElement
 */
export const Helper = ({ className, hasSpaceForErrors, helperLinkAction, helperText, iconName }) => (_jsxs(HelperItem, Object.assign({ className: className, isLink: !!helperLinkAction, onClick: helperLinkAction, hasSpaceForErrors: hasSpaceForErrors }, { children: [iconName && _jsx(HelperIcon, { name: iconName }), _jsx(HelperDescription, Object.assign({ "data-testid": `input:helper-text:${helperText}`, light: true, size: "xs" }, { children: helperText }))] })));
Helper.propTypes = {
    /** Classname provided to the HelperItem */
    className: PropTypes.string,
    /** Adds space for an error. Suggest passing !!errors into this prop to add/remove it based on the existence of errors */
    hasSpaceForErrors: PropTypes.bool,
    /** onClick */
    helperLinkAction: PropTypes.func,
    /** Text inside the helper description */
    helperText: PropTypes.string,
    /** Name of icon  */
    iconName: PropTypes.string,
};
Helper.defaultProps = {
    iconName: 'actions/circle-faq',
};
export default styled(Helper).withConfig({ componentId: "brc-sc-c3e7gj" }) ``;
//# sourceMappingURL=helper.js.map