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

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Helper = exports.HelperItem = exports.HelperDescription = exports.HelperIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const button_js_1 = require("./button.js");
const copy_js_1 = require("./copy.js");
const icon_js_1 = require("./icon.js");
exports.HelperIcon = (0, styled_components_1.default)(icon_js_1.Icon).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-jf9smw" }) `
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => theme.navNeutral400};
`;
exports.HelperDescription = (0, styled_components_1.default)(copy_js_1.Copy).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-HelperDescription", componentId: "brc-sc-1l0h8ab" }) `
  color: inherit;
`;
const getHelperItemColor = (theme, isLink) => {
    return !isLink && theme.navNeutral400;
};
exports.HelperItem = styled_components_1.default.div.attrs(({ isLink }) => isLink && { as: button_js_1.Button, variation: 'buttonLink', type: 'button' }).withConfig({ displayName: "brc-sc-HelperItem", componentId: "brc-sc-12ewc8l" }) `
  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
 */
const _Helper = ({ className, hasSpaceForErrors, helperLinkAction, helperText, iconName = 'actions/circle-faq', }) => ((0, jsx_runtime_1.jsxs)(exports.HelperItem, { className: className, isLink: !!helperLinkAction, onClick: helperLinkAction, hasSpaceForErrors: hasSpaceForErrors, children: [iconName && (0, jsx_runtime_1.jsx)(exports.HelperIcon, { name: iconName }), (0, jsx_runtime_1.jsx)(exports.HelperDescription, { "data-testid": `input:helper-text:${helperText}`, light: true, children: helperText })] }));
exports.Helper = (0, styled_components_1.default)(_Helper).withConfig({ displayName: "brc-sc-Helper", componentId: "brc-sc-1s1r0xb" }) ``;
//# sourceMappingURL=helper.js.map