Keycloak
1import { Popover } from "@patternfly/react-core";
2import { HelpIcon } from "@patternfly/react-icons";
3import { ReactNode } from "react";
4import { useHelp } from "../context/HelpContext";
5
6type HelpItemProps = {
7helpText: string | ReactNode;
8fieldLabelId: string;
9noVerticalAlign?: boolean;
10unWrap?: boolean;
11};
12
13export const HelpItem = ({
14helpText,
15fieldLabelId,
16noVerticalAlign = true,
17unWrap = false,
18}: HelpItemProps) => {
19const { enabled } = useHelp();
20return enabled ? (
21<Popover bodyContent={helpText}>
22<>
23{!unWrap && (
24<button
25data-testid={`help-label-${fieldLabelId}`}
26aria-label={fieldLabelId}
27onClick={(e) => e.preventDefault()}
28className="pf-c-form__group-label-help"
29>
30<HelpIcon noVerticalAlign={noVerticalAlign} />
31</button>
32)}
33{unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
34</>
35</Popover>
36) : null;
37};
38