Keycloak

1
import { Popover } from "@patternfly/react-core";
2
import { HelpIcon } from "@patternfly/react-icons";
3
import { ReactNode } from "react";
4
import { useHelp } from "../context/HelpContext";
5

6
type HelpItemProps = {
7
  helpText: string | ReactNode;
8
  fieldLabelId: string;
9
  noVerticalAlign?: boolean;
10
  unWrap?: boolean;
11
};
12

13
export const HelpItem = ({
14
  helpText,
15
  fieldLabelId,
16
  noVerticalAlign = true,
17
  unWrap = false,
18
}: HelpItemProps) => {
19
  const { enabled } = useHelp();
20
  return enabled ? (
21
    <Popover bodyContent={helpText}>
22
      <>
23
        {!unWrap && (
24
          <button
25
            data-testid={`help-label-${fieldLabelId}`}
26
            aria-label={fieldLabelId}
27
            onClick={(e) => e.preventDefault()}
28
            className="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