Toggletip component

[Robbert]

Figma Toggletip in Local - Rijkshuisstijl - Bibliotheek

PR - added toggletip tokens: https://github.com/nl-design-system/rijkshuisstijl-community/pull/657

[Rerbun]

Styling van het team van Ruben O:

[Rerbun]

Tooltip.tsx:

import { FunctionComponent, HTMLAttributes, ReactNode } from "react";
import { Collapse } from "react-bootstrap";
import { ReactComponent as ToelichtingDichtIcoon } from "../../../icons/functioneel/55-toelichting.svg";
import { ReactComponent as ToelichtingOpenIcoon } from "../../../icons/functioneel/56-toelichting-lined-blue.svg";
import { Melding } from "../../main";
import { UseTooltipReturnType } from "./useTooltip";

type TooltipToggleProps = {
  tooltip: UseTooltipReturnType;
  omschrijvingKnop: string;
} & HTMLAttributes<HTMLButtonElement>;

export const TooltipToggle: FunctionComponent<TooltipToggleProps> = ({
  tooltip: { id, toggleVisibility, visible },
  omschrijvingKnop,
  ...props
}) => (
  <button
    onClick={toggleVisibility}
    className="btn btn-link btn-link-tooltip"
    aria-expanded={visible}
    aria-controls={id}
    aria-describedby={id}
    type="button"
    title={omschrijvingKnop}
    {...props}
  >
    {visible ? <ToelichtingOpenIcoon /> : <ToelichtingDichtIcoon />}
  </button>
);

type TooltipMeldingProps = {
  tooltip: UseTooltipReturnType;
  children: ReactNode;
} & HTMLAttributes<HTMLDivElement>;
export const TooltipMelding: FunctionComponent<TooltipMeldingProps> = ({
  tooltip: { visible, id },
  children,
  ...props
}) => (
  <Collapse in={visible}>
    <div id={id} role="tooltip" {...props} aria-hidden="true">
      <Melding variant="toelichting">{children}</Melding>
    </div>
  </Collapse>
);

[Rerbun]

useTooltip.tsx:

import { useCallback, useId, useMemo, useState } from "react";

export type UseTooltipReturnType = {
  visible: boolean;
  toggleVisibility: () => void;
  id: string;
};

export const useTooltip = (): UseTooltipReturnType => {
  const [visible, setVisible] = useState<boolean>(false);
  const toggleVisibility = useCallback(() => setVisible((visible) => !visible), []);
  const id = useId();

  return useMemo(() => ({ visible, toggleVisibility, id }), [id, visible, toggleVisibility]);
};

[Rubenoo]

Wij hebben dit weer overgenomen van MijnOverheid:

[Rerbun]

RVO: https://nl-design-system.github.io/rvo/?path=/docs/componenten-expandable-text--documentatie

[Robbert]

Code bij RVO: https://nl-design-system.github.io/rvo/?path=/docs/componenten-expandable-text--documentatie

[Rozerinay]

PR: https://github.com/nl-design-system/rijkshuisstijl-community/pull/657