@helsenorge/designsystem-react 11.1.0-alpha.0 → 11.1.0

package/HelpBubble.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { A as AnchorLink } from "./AnchorLink.js";
+import { C as Close } from "./Close.js";
+import { P as PopOverVariant, a as PopOver } from "./PopOver.js";
+import styles from "./components/HelpBubble/styles.module.scss";
+const HelpBubbleVariant = PopOverVariant;
+const HelpBubble = React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    className = "",
+    noCloseButton,
+    linkText = "Mer hjelp",
+    linkUrl,
+    linkTarget,
+    onLinkClick,
+    onClose,
+    closeAriaLabel,
+    // Props passed on to PopOver
+    showBubble,
+    helpBubbleId,
+    variant,
+    controllerRef,
+    role,
+    testId
+  } = props;
+  const isTooltip = role === "tooltip";
+  if (!showBubble && !isTooltip) {
+    return null;
+  }
+  const helpBubbleClasses = classNames(styles.helpbubble, className);
+  const contentClasses = classNames(styles.helpbubble__content, {
+    [styles["helpbubble__content--close"]]: !noCloseButton && !isTooltip
+  });
+  const renderLink = () => {
+    if (isTooltip) {
+      return;
+    }
+    if (onLinkClick && linkText) {
+      return /* @__PURE__ */ jsx("button", { className: styles.helpbubble__link, onClick: onLinkClick, type: "button", children: linkText });
+    } else if (linkUrl && linkText) {
+      return /* @__PURE__ */ jsx(AnchorLink, { href: linkUrl, target: linkTarget, children: linkText });
+    }
+  };
+  const renderCloseButton = () => {
+    if (noCloseButton || isTooltip) {
+      return;
+    }
+    return /* @__PURE__ */ jsx("div", { className: styles.helpbubble__close, children: /* @__PURE__ */ jsx(Close, { small: true, onClick: onClose, ariaLabel: closeAriaLabel }) });
+  };
+  return /* @__PURE__ */ jsx(
+    PopOver,
+    {
+      id: helpBubbleId,
+      variant,
+      controllerRef,
+      role,
+      ref,
+      show: isTooltip && showBubble,
+      testId,
+      children: /* @__PURE__ */ jsxs("div", { className: helpBubbleClasses, "data-analyticsid": AnalyticsId.HelpBubble, children: [
+        renderCloseButton(),
+        /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+          children,
+          renderLink()
+        ] })
+      ] })
+    }
+  );
+});
+HelpBubble.displayName = "HelpBubble";
+export {
+  HelpBubble as H,
+  HelpBubbleVariant as a
+};
+//# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["React"],"mappings":";;;;;;;;AAWO,MAAM,oBAAoB;AAqCjC,MAAM,aAAaA,eAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,SAAS;AAEvB,MAAA,CAAC,cAAc,CAAC,WAAW;AACtB,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,qBAAqB;AAAA,IAC5D,CAAC,OAAO,4BAA4B,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAAA,EAAA,CAC5D;AAED,QAAM,aAAa,MAA+B;AAEhD,QAAI,WAAW;AACb;AAAA,IAAA;AAEF,QAAI,eAAe,UAAU;AAEzB,aAAA,oBAAC,YAAO,WAAW,OAAO,kBAAkB,SAAS,aAAa,MAAK,UACpE,UACH,SAAA,CAAA;AAAA,IAAA,WAEO,WAAW,UAAU;AAC9B,iCACG,YAAW,EAAA,MAAM,SAAS,QAAQ,YAChC,UACH,UAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,oBAAoB,MAA+B;AACvD,QAAI,iBAAiB,WAAW;AAC9B;AAAA,IAAA;AAEF,WACG,oBAAA,OAAA,EAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,OAAM,EAAA,OAAK,MAAC,SAAS,SAAS,WAAW,eAAgB,CAAA,GAC5D;AAAA,EAEJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa;AAAA,MACnB;AAAA,MAEA,+BAAC,OAAI,EAAA,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,QAAkB,kBAAA;AAAA,QACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW;AAAA,QAAA,EACd,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;AAED,WAAW,cAAc;"}