@navinc/base-react-components
Version:
Nav's Pattern Library
59 lines • 3.34 kB
JavaScript
;
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 = __importDefault(require("./button.js"));
const copy_js_1 = __importDefault(require("./copy.js"));
const icon_js_1 = __importDefault(require("./icon.js"));
const prop_types_1 = __importDefault(require("prop-types"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
exports.HelperIcon = (0, styled_components_1.default)(icon_js_1.default).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-egbq1p" }) `
max-width: 16px;
max-height: 16px;
fill: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navNeutral400 : theme.neutral400)};
`;
exports.HelperDescription = (0, styled_components_1.default)(copy_js_1.default).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-HelperDescription", componentId: "brc-sc-rn7c91" }) `
color: inherit;
`;
const getHelperItemColor = (theme, isLink) => {
if ((0, is_rebrand_js_1.default)(theme))
return !isLink && theme.navNeutral400;
return !isLink && theme.neutral400;
};
exports.HelperItem = styled_components_1.default.div.attrs(({ isLink }) => isLink && { as: button_js_1.default, 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
*/
const Helper = ({ className, hasSpaceForErrors, helperLinkAction, helperText, iconName }) => ((0, jsx_runtime_1.jsxs)(exports.HelperItem, Object.assign({ 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, Object.assign({ "data-testid": `input:helper-text:${helperText}`, light: true, size: "xs" }, { children: helperText }))] })));
exports.Helper = Helper;
exports.Helper.propTypes = {
/** Classname provided to the HelperItem */
className: prop_types_1.default.string,
/** Adds space for an error. Suggest passing !!errors into this prop to add/remove it based on the existence of errors */
hasSpaceForErrors: prop_types_1.default.bool,
/** onClick */
helperLinkAction: prop_types_1.default.func,
/** Text inside the helper description */
helperText: prop_types_1.default.string,
/** Name of icon */
iconName: prop_types_1.default.string,
};
exports.Helper.defaultProps = {
iconName: 'actions/circle-faq',
};
exports.default = (0, styled_components_1.default)(exports.Helper).withConfig({ componentId: "brc-sc-c3e7gj" }) ``;
//# sourceMappingURL=helper.js.map