@helsenorge/designsystem-react 12.0.0-beta.1 → 12.0.0-beta.2

package/components/ExpanderList/styles.module.scss.d.ts

@@ -1,43 +1,63 @@
 export type Styles = {
   'expander-list': string;
   'expander-list__item': string;
+  'expander-list__item__status-marker': string;
+  'expander-list__item__status-marker--new': string;
   'expander-list__item--fill': string;
   'expander-list__item--fill--blueberry': string;
   'expander-list__item--fill--cherry': string;
   'expander-list__item--fill--neutral': string;
   'expander-list__item--fill--white': string;
   'expander-list__item--fill-negative': string;
+  'expander-list__item--fill-negative--blueberry': string;
+  'expander-list__item--fill-negative--cherry': string;
+  'expander-list__item--fill-negative--neutral': string;
+  'expander-list__item--fill-negative--white': string;
   'expander-list__item--line': string;
   'expander-list__item--line--blueberry': string;
   'expander-list__item--line--cherry': string;
   'expander-list__item--line--neutral': string;
   'expander-list__item--line--white': string;
+  'expander-list__item--new': string;
   'expander-list__item--outline': string;
   'expander-list__item--outline--blueberry': string;
   'expander-list__item--outline--cherry': string;
   'expander-list__item--outline--neutral': string;
   'expander-list__item--outline--white': string;
+  'expander-list--fill': string;
+  'expander-list--outline--blueberry': string;
+  'expander-list--outline--cherry': string;
+  'expander-list--outline--neutral': string;
+  'expander-list--outline--white': string;
   'expander-list-link': string;
   'expander-list-link__chevron': string;
   'expander-list-link__icon': string;
   'expander-list-link__main-content': string;
   'expander-list-link__main-content--expanded': string;
+  'expander-list-link__main-content--new': string;
+  'expander-list-link__main-content--outline--blueberry': string;
+  'expander-list-link__main-content--outline--cherry': string;
+  'expander-list-link__main-content--outline--neutral': string;
+  'expander-list-link__main-content--outline--white': string;
   'expander-list-link__main-content--padding': string;
   'expander-list-link--blueberry': string;
   'expander-list-link--cherry': string;
-  'expander-list-link--closed': string;
-  'expander-list-link--fill': string;
   'expander-list-link--fill--blueberry': string;
   'expander-list-link--fill--cherry': string;
   'expander-list-link--fill--neutral': string;
   'expander-list-link--fill--white': string;
   'expander-list-link--fill-negative': string;
+  'expander-list-link--fill-negative--blueberry': string;
+  'expander-list-link--fill-negative--cherry': string;
+  'expander-list-link--fill-negative--neutral': string;
+  'expander-list-link--fill-negative--white': string;
   'expander-list-link--large': string;
   'expander-list-link--line--blueberry': string;
   'expander-list-link--line--cherry': string;
   'expander-list-link--line--neutral': string;
   'expander-list-link--line--white': string;
   'expander-list-link--neutral': string;
+  'expander-list-link--new': string;
   'expander-list-link--open': string;
   'expander-list-link--outline': string;
   'expander-list-link--outline--blueberry': string;

package/components/HelpBubble/HelpBubble.d.ts

@@ -1,8 +1,13 @@
 import { default as React } from 'react';
+import { HNDesignsystemHelpBubble } from '../../resources/Resources';
 import { AnchorLinkTargets } from '../AnchorLink';
 import { PopOverProps, PopOverVariant } from '../PopOver';
 export declare const HelpBubbleVariant: typeof PopOverVariant;
 export interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {
+    /** Sets aria-label of the bubble. */
+    ariaLabel?: string;
+    /** Sets aria-labelledby of the bubble. */
+    ariaLabelledById?: string;
     /** Id of the HelpBubble */
     helpBubbleId?: string;
     /** Content shown inside HelpBubble. */
@@ -29,6 +34,8 @@ export interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'varian
     onClose?: () => void;
     /** aria-label to be passed onto Close */
     closeAriaLabel?: string;
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemHelpBubble>;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/HelpBubble/index.js

@@ -1,14 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
-import { AnalyticsId } from "../../constants.js";
+import { LanguageLocales, AnalyticsId } from "../../constants.js";
+import { useLanguage } from "../../utils/language.js";
 import { A as AnchorLink } from "../../AnchorLink.js";
 import { C as Close } from "../../Close.js";
 import { a as PopOverVariant, P as PopOver } from "../../PopOver.js";
 import styles from "./styles.module.scss";
+const ariaLabel = "Hjelpetekst";
+const nbNO = {
+  ariaLabel
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const HelpBubbleVariant = PopOverVariant;
 const HelpBubble = React__default.forwardRef((props, ref) => {
   const {
+    ariaLabelledById,
     children,
     className = "",
     noCloseButton,
@@ -23,11 +36,19 @@ const HelpBubble = React__default.forwardRef((props, ref) => {
     helpBubbleId,
     variant,
     controllerRef,
+    resources,
     testId
   } = props;
   if (!showBubble) {
     return null;
   }
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabel: props.ariaLabel ?? (resources == null ? void 0 : resources.ariaLabel) ?? defaultResources.ariaLabel
+  };
   const helpBubbleClasses = classNames(styles.helpbubble, className);
   const contentClasses = classNames(styles.helpbubble__content);
   const renderLink = () => {
@@ -43,13 +64,27 @@ const HelpBubble = React__default.forwardRef((props, ref) => {
     }
     return /* @__PURE__ */ jsx(Close, { small: true, color: "plum", onClick: onClose, ariaLabel: closeAriaLabel, className: styles.helpbubble__close });
   };
-  return /* @__PURE__ */ jsx(PopOver, { id: helpBubbleId, variant, controllerRef, role: "dialog", ref, show: showBubble, testId, children: /* @__PURE__ */ jsxs("div", { className: helpBubbleClasses, "data-analyticsid": AnalyticsId.HelpBubble, children: [
-    renderCloseButton(),
-    /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
-      children,
-      renderLink()
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    PopOver,
+    {
+      ariaLabel: mergedResources.ariaLabel,
+      ariaLabelledById,
+      id: helpBubbleId,
+      variant,
+      controllerRef,
+      role: "dialog",
+      ref,
+      show: 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 {

package/components/HelpBubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. */\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. */\n  noCloseButton?: boolean;\n  /** Visible text on the link. */\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 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    testId,\n  } = props;\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content);\n\n  const renderLink = (): JSX.Element | undefined => {\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) {\n      return;\n    }\n    return <Close small color=\"plum\" onClick={onClose} ariaLabel={closeAriaLabel} className={styles.helpbubble__close} />;\n  };\n\n  return (\n    <PopOver id={helpBubbleId} variant={variant} controllerRef={controllerRef} role=\"dialog\" ref={ref} show={showBubble} testId={testId}>\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;AAiCjC,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,EAAA,IACE;AAEJ,MAAI,CAAC,YAAY;AACR,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,mBAAmB;AAE5D,QAAM,aAAa,MAA+B;AAChD,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,eAAe;AACjB;AAAA,IAAA;AAEF,WAAQ,oBAAA,OAAA,EAAM,OAAK,MAAC,OAAM,QAAO,SAAS,SAAS,WAAW,gBAAgB,WAAW,OAAO,kBAAmB,CAAA;AAAA,EACrH;AAEA,6BACG,SAAQ,EAAA,IAAI,cAAc,SAAkB,eAA8B,MAAK,UAAS,KAAU,MAAM,YAAY,QACnH,UAAC,qBAAA,OAAA,EAAI,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,IAAkB,kBAAA;AAAA,IACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,MAAA;AAAA,MACA,WAAW;AAAA,IAAA,EACd,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;AAED,WAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubble/resourceHelper.ts","../../../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.HelpBubble.nb-NO.json';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemHelpBubble => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemHelpBubble } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Sets aria-label of the bubble. */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. */\n  ariaLabelledById?: string;\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. */\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. */\n  noCloseButton?: boolean;\n  /** Visible text on the link. */\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  /** Resources for the component */\n  resources?: Partial<HNDesignsystemHelpBubble>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    ariaLabelledById,\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    resources,\n    testId,\n  } = props;\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemHelpBubble = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: props.ariaLabel ?? resources?.ariaLabel ?? defaultResources.ariaLabel,\n  };\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n  const contentClasses = classNames(styles.helpbubble__content);\n\n  const renderLink = (): JSX.Element | undefined => {\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) {\n      return;\n    }\n    return <Close small color=\"plum\" onClick={onClose} ariaLabel={closeAriaLabel} className={styles.helpbubble__close} />;\n  };\n\n  return (\n    <PopOver\n      ariaLabel={mergedResources.ariaLabel}\n      ariaLabelledById={ariaLabelledById}\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role=\"dialog\"\n      ref={ref}\n      show={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":";;;;;;;;;;;;;AAIa,MAAA,eAAe,CAAC,aAAwD;AACnF,UAAQ,UAAU;AAAA,IAChB,KAAK,gBAAgB;AAAA,IACrB;AACS,aAAA;AAAA,EAAA;AAEb;ACIO,MAAM,oBAAoB;AAuCjC,MAAM,aAAaA,eAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA;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,MAAI,CAAC,YAAY;AACR,WAAA;AAAA,EAAA;AAGT,QAAM,EAAE,SAAa,IAAA,YAA6B,gBAAgB,SAAS;AACrE,QAAA,mBAAmB,aAAa,QAAQ;AAC9C,QAAM,kBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAW,MAAM,cAAa,uCAAW,cAAa,iBAAiB;AAAA,EACzE;AAEA,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAC3D,QAAA,iBAAiB,WAAW,OAAO,mBAAmB;AAE5D,QAAM,aAAa,MAA+B;AAChD,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,eAAe;AACjB;AAAA,IAAA;AAEF,WAAQ,oBAAA,OAAA,EAAM,OAAK,MAAC,OAAM,QAAO,SAAS,SAAS,WAAW,gBAAgB,WAAW,OAAO,kBAAmB,CAAA;AAAA,EACrH;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gBAAgB;AAAA,MAC3B;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN;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;"}

package/components/HelpBubble/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemHelpBubble } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemHelpBubble;

package/components/HelpBubble/styles.module.scss

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../AnchorLink/styles.module' as anchorlink;
 @use '../../scss/breakpoints' as breakpoints;

package/components/HelpDetails/styles.module.scss

@@ -7,8 +7,9 @@
 .help-details {
   @include fonts.help-text;
 
-  background-color: var(--core-color-plum-50);
-  border: 1px solid var(--core-color-plum-400);
+  color: var(--color-base-text-onlight);
+  background-color: var(--color-help-background-normal);
+  border: 1px solid var(--color-help-border-subtle-wcag);
   border-radius: 0.25rem;
   position: relative;
 

package/components/HelpDrawer/HelpDrawer.d.ts

@@ -1,6 +1,9 @@
 import { default as React } from 'react';
+import { HNDesignsystemHelpDrawer } from '../../resources/Resources';
 import { DrawerProps } from '../Drawer';
 export interface HelpDrawerProps extends Pick<DrawerProps, 'ariaLabel' | 'ariaLabelledBy' | 'ariaLabelCloseBtn' | 'children' | 'isOpen' | 'onRequestClose' | 'title' | 'titleHtmlMarkup' | 'titleId' | 'zIndex'> {
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemHelpDrawer>;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/HelpDrawer/index.js

@@ -1,8 +1,38 @@
 import { jsx } from "react/jsx-runtime";
+import { LanguageLocales } from "../../constants.js";
+import { useLanguage } from "../../utils/language.js";
 import { D as Drawer } from "../../Drawer.js";
 import styles from "./styles.module.scss";
+const ariaLabel = "Hjelpetekst";
+const nbNO = {
+  ariaLabel
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const HelpDrawer = (props) => {
-  return /* @__PURE__ */ jsx(Drawer, { ...props, closeColor: "plum", headerClasses: styles["help-drawer"], desktopDirection: "right" });
+  var _a;
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...props.resources,
+    ariaLabel: props.ariaLabel ?? ((_a = props.resources) == null ? void 0 : _a.ariaLabel) ?? defaultResources.ariaLabel
+  };
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      ...props,
+      closeColor: "plum",
+      headerClasses: styles["help-drawer"],
+      desktopDirection: "left",
+      ariaLabel: mergedResources.ariaLabel
+    }
+  );
 };
 export {
   HelpDrawer as default

package/components/HelpDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpDrawer/HelpDrawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport Drawer, { DrawerProps } from '../Drawer';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpDrawerProps\n  extends Pick<\n    DrawerProps,\n    | 'ariaLabel'\n    | 'ariaLabelledBy'\n    | 'ariaLabelCloseBtn'\n    | 'children'\n    | 'isOpen'\n    | 'onRequestClose'\n    | 'title'\n    | 'titleHtmlMarkup'\n    | 'titleId'\n    | 'zIndex'\n  > {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpDrawer: React.FC<HelpDrawerProps> = props => {\n  return <Drawer {...props} closeColor={'plum'} headerClasses={styles['help-drawer']} desktopDirection={'right'} />;\n};\n\nexport default HelpDrawer;\n"],"names":[],"mappings":";;;AAwBA,MAAM,aAAwC,CAAS,UAAA;AAC9C,SAAA,oBAAC,QAAQ,EAAA,GAAG,OAAO,YAAY,QAAQ,eAAe,OAAO,aAAa,GAAG,kBAAkB,QAAS,CAAA;AACjH;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpDrawer/resourceHelper.ts","../../../src/components/HelpDrawer/HelpDrawer.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.HelpDrawer.nb-NO.json';\nimport { HNDesignsystemHelpDrawer } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemHelpDrawer => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport { getResources } from './resourceHelper';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemHelpDrawer } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Drawer, { DrawerProps } from '../Drawer';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpDrawerProps\n  extends Pick<\n    DrawerProps,\n    | 'ariaLabel'\n    | 'ariaLabelledBy'\n    | 'ariaLabelCloseBtn'\n    | 'children'\n    | 'isOpen'\n    | 'onRequestClose'\n    | 'title'\n    | 'titleHtmlMarkup'\n    | 'titleId'\n    | 'zIndex'\n  > {\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemHelpDrawer>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpDrawer: React.FC<HelpDrawerProps> = props => {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemHelpDrawer = {\n    ...defaultResources,\n    ...props.resources,\n    ariaLabel: props.ariaLabel ?? props.resources?.ariaLabel ?? defaultResources.ariaLabel,\n  };\n\n  return (\n    <Drawer\n      {...props}\n      closeColor={'plum'}\n      headerClasses={styles['help-drawer']}\n      desktopDirection={'left'}\n      ariaLabel={mergedResources.ariaLabel}\n    />\n  );\n};\n\nexport default HelpDrawer;\n"],"names":[],"mappings":";;;;;;;;;AAIa,MAAA,eAAe,CAAC,aAAwD;AACnF,UAAQ,UAAU;AAAA,IAChB,KAAK,gBAAgB;AAAA,IACrB;AACS,aAAA;AAAA,EAAA;AAEb;ACoBA,MAAM,aAAwC,CAAS,UAAA;;AACrD,QAAM,EAAE,SAAa,IAAA,YAA6B,gBAAgB,SAAS;AACrE,QAAA,mBAAmB,aAAa,QAAQ;AAC9C,QAAM,kBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG,MAAM;AAAA,IACT,WAAW,MAAM,eAAa,WAAM,cAAN,mBAAiB,cAAa,iBAAiB;AAAA,EAC/E;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,eAAe,OAAO,aAAa;AAAA,MACnC,kBAAkB;AAAA,MAClB,WAAW,gBAAgB;AAAA,IAAA;AAAA,EAC7B;AAEJ;"}

package/components/HelpDrawer/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemHelpDrawer } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemHelpDrawer;

package/components/HelpDrawer/styles.module.scss

@@ -2,15 +2,5 @@
 @import '../../scss/supernova/styles/colors.css';
 
 .help-drawer {
-  background-color: var(--core-color-plum-50);
-
-  &__close-button {
-    svg {
-      fill: var(--core-color-plum-700);
-    }
-
-    &:hover {
-      background-color: var(--core-color-plum-100);
-    }
-  }
+  background-color: var(--color-help-background-normal);
 }

package/components/HelpDrawer/styles.module.scss.d.ts

@@ -1,6 +1,5 @@
 export type Styles = {
   'help-drawer': string;
-  'help-drawer__close-button': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HelpPanel/styles.module.scss

@@ -1,6 +1,6 @@
 @import '../../scss/supernova/styles/colors.css';
 
 .help-panel {
-  background-color: var(--core-color-plum-50) !important;
-  border: 1px solid var(--core-color-plum-400) !important;
+  background-color: var(--color-help-background-normal) !important;
+  border: 1px solid var(--color-help-border-subtle-wcag) !important;
 }

package/components/HelpTeaser/styles.module.scss

@@ -1,22 +1,22 @@
 @import '../../scss/supernova/styles/colors.css';
 
 .helpteaser {
-  background-color: var(--core-color-plum-50);
-  border: 1px solid var(--core-color-plum-400);
+  background-color: var(--color-help-background-normal);
+  border: 1px solid var(--color-help-border-subtle-wcag);
 
   &::after {
     background: linear-gradient(180deg, #f4ecfe40 0%, #f4ecfe 80%);
   }
 
   &__button {
-    background-color: var(--core-color-plum-700);
+    background-color: var(--color-help-graphics-normal);
 
     &:hover {
-      background-color: var(--core-color-plum-900);
+      background-color: var(--color-help-graphics-verydark);
     }
 
     &:active {
-      background-color: var(--core-color-plum-800);
+      background-color: var(--color-help-graphics-dark);
     }
   }
 }

package/components/HelpTooltip/HelpTooltip.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { FloatingDelayGroup } from '@floating-ui/react';
 export interface HelpTooltipProps {
-    /** Ordet som skal ha en tilhørende tooltip */
-    children: string;
+    /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */
+    children: React.ReactNode;
     /** Teksten som skal vises i boblen som åpnes */
     description: React.ReactNode;
     /** Valgfri test-id */

package/components/HelpTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpTooltip/HelpTooltip.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { useFloating, useHover, useFocus, useDismiss, useInteractions, FloatingDelayGroup } from '@floating-ui/react';\n\nimport { useUuid } from '../../hooks/useUuid';\nimport DictionaryTrigger from '../DictionaryTrigger';\nimport PopOver from '../PopOver';\n\nexport interface HelpTooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i boblen som åpnes */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, description, testId }) => {\n  const popoverId = useUuid();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { refs, context } = useFloating({\n    open: showTooltip,\n    elements: {\n      reference: wordRef.current,\n    },\n    onOpenChange: setShowTooltip,\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps } = useInteractions([hover, focus, dismiss]);\n\n  return (\n    <>\n      <DictionaryTrigger ref={wordRef} {...getReferenceProps()} selected={showTooltip} aria-describedby={popoverId} data-testid={testId}>\n        {children}\n      </DictionaryTrigger>\n      <PopOver role=\"tooltip\" ref={refs.setFloating} id={popoverId} show={showTooltip} testId={testId} controllerRef={wordRef}>\n        {description}\n      </PopOver>\n    </>\n  );\n};\n\nexport const HelpTooltipDelayGroup = FloatingDelayGroup;\n\nexport default HelpTooltip;\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,cAA0C,CAAC,EAAE,UAAU,aAAa,aAAa;AAC5F,QAAM,YAAY,QAAQ;AAC1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAE9C,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,MAAM,QAAQ,IAAI,YAAY;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,MACR,WAAW,QAAQ;AAAA,IACrB;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,QAAM,QAAQ,SAAS,SAAS,EAAE,MAAM,OAAO;AACzC,QAAA,QAAQ,SAAS,OAAO;AACxB,QAAA,UAAU,WAAW,OAAO;AAE5B,QAAA,EAAE,sBAAsB,gBAAgB,CAAC,OAAO,OAAO,OAAO,CAAC;AAErE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,mBAAkB,EAAA,KAAK,SAAU,GAAG,kBAAkB,GAAG,UAAU,aAAa,oBAAkB,WAAW,eAAa,QACxH,SACH,CAAA;AAAA,IACC,oBAAA,SAAA,EAAQ,MAAK,WAAU,KAAK,KAAK,aAAa,IAAI,WAAW,MAAM,aAAa,QAAgB,eAAe,SAC7G,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,wBAAwB;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpTooltip/HelpTooltip.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { useFloating, useHover, useFocus, useDismiss, useInteractions, FloatingDelayGroup } from '@floating-ui/react';\n\nimport { useUuid } from '../../hooks/useUuid';\nimport DictionaryTrigger from '../DictionaryTrigger';\nimport PopOver from '../PopOver';\n\nexport interface HelpTooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */\n  children: React.ReactNode;\n  /** Teksten som skal vises i boblen som åpnes */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, description, testId }) => {\n  const popoverId = useUuid();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { refs, context } = useFloating({\n    open: showTooltip,\n    elements: {\n      reference: wordRef.current,\n    },\n    onOpenChange: setShowTooltip,\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps } = useInteractions([hover, focus, dismiss]);\n\n  return (\n    <>\n      <DictionaryTrigger ref={wordRef} {...getReferenceProps()} selected={showTooltip} aria-describedby={popoverId} data-testid={testId}>\n        {children}\n      </DictionaryTrigger>\n      <PopOver role=\"tooltip\" ref={refs.setFloating} id={popoverId} show={showTooltip} testId={testId} controllerRef={wordRef}>\n        {description}\n      </PopOver>\n    </>\n  );\n};\n\nexport const HelpTooltipDelayGroup = FloatingDelayGroup;\n\nexport default HelpTooltip;\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,cAA0C,CAAC,EAAE,UAAU,aAAa,aAAa;AAC5F,QAAM,YAAY,QAAQ;AAC1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAE9C,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,MAAM,QAAQ,IAAI,YAAY;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,MACR,WAAW,QAAQ;AAAA,IACrB;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,QAAM,QAAQ,SAAS,SAAS,EAAE,MAAM,OAAO;AACzC,QAAA,QAAQ,SAAS,OAAO;AACxB,QAAA,UAAU,WAAW,OAAO;AAE5B,QAAA,EAAE,sBAAsB,gBAAgB,CAAC,OAAO,OAAO,OAAO,CAAC;AAErE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,mBAAkB,EAAA,KAAK,SAAU,GAAG,kBAAkB,GAAG,UAAU,aAAa,oBAAkB,WAAW,eAAa,QACxH,SACH,CAAA;AAAA,IACC,oBAAA,SAAA,EAAQ,MAAK,WAAU,KAAK,KAAK,aAAa,IAAI,WAAW,MAAM,aAAa,QAAgB,eAAe,SAC7G,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,wBAAwB;"}

package/components/HelpTriggerIcon/HelpTriggerIcon.d.ts

@@ -23,6 +23,10 @@ export interface HelpTriggerIconProps extends Pick<React.InputHTMLAttributes<HTM
     weight?: HelpTriggerWeights;
 }
 interface HelpTriggerIconInternalProps extends HelpTriggerIconProps {
+    /**
+     * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.
+     */
+    isHovered?: boolean;
     /**
      * Only use this if the parent wrapper is a Button!
      * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button

package/components/HelpTriggerIcon/styles.module.scss

@@ -66,7 +66,7 @@ $outline-focus-outer-width: 5px;
         $outline-width: clamp(0px, 0.3em, 3px);
 
         inset: calc(-1 * (#{$outline-width}/ 3));
-        box-shadow: inset 0 0 0 #{$outline-width} var(--core-color-black);
+        box-shadow: inset 0 0 0 #{$outline-width} var(--color-action-border-onlight-focus);
         z-index: 1;
       }
     }
@@ -95,7 +95,7 @@ $outline-focus-outer-width: 5px;
   &--large#{&}--is-button {
     &:focus-visible {
       box-shadow: none;
-      outline: 3px solid var(--core-color-black);
+      outline: 3px solid var(--color-action-border-onlight-focus);
       outline-offset: -2px;
     }
   }
@@ -115,38 +115,38 @@ $outline-focus-outer-width: 5px;
   &--xlarge#{&}--is-button {
     &:focus-visible {
       box-shadow: none;
-      outline: 3.5px solid var(--core-color-black);
+      outline: 3.5px solid var(--color-action-border-onlight-focus);
       outline-offset: -2px;
     }
   }
 
   &--is-button {
     &:hover {
-      background-color: var(--core-color-plum-50);
+      background-color: var(--color-help-background-transparent-onlight-hover);
     }
 
     &:active {
-      background-color: var(--core-color-plum-100);
+      background-color: var(--color-help-background-transparent-onlight-active);
     }
   }
 
   &--strong {
-    background-color: var(--core-color-plum-700);
+    background-color: var(--color-help-graphics-normal);
   }
 
   &--strong#{&}--is-button {
     &:hover {
-      background-color: var(--core-color-plum-800);
+      background-color: var(--color-help-graphics-verydark);
     }
 
     &:active {
-      background-color: var(--core-color-plum-900);
+      background-color: var(--color-help-graphics-normal);
     }
 
     &:focus-visible {
       box-shadow:
-        0 0 0 #{$outline-focus-inner-width} var(--core-color-white),
-        0 0 0 calc(#{$outline-focus-outer-width}) var(--core-color-black);
+        0 0 0 #{$outline-focus-inner-width} var(--color-base-graphics-ondark),
+        0 0 0 calc(#{$outline-focus-outer-width}) var(--color-action-border-onlight-focus);
       outline: none;
 
       &::after {

package/components/HelpTriggerInline/index.js

@@ -2,13 +2,16 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
+import { useHover } from "../../hooks/useHover.js";
 import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { mergeRefs } from "../../utils/refs.js";
 import { H as HelpTriggerIconInternal } from "../../HelpTriggerIcon.js";
 import styles from "./styles.module.scss";
 const HelpTriggerInline = React__default.forwardRef(
   ({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ...rest }, ref) => {
     const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
     const helpTriggerInlineStyles = classNames(styles["help-trigger-inline"], className);
+    const { hoverRef, isHovered } = useHover(ref, false);
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -17,12 +20,12 @@ const HelpTriggerInline = React__default.forwardRef(
         "data-testid": testId,
         "data-analyticsid": AnalyticsId.HelpTriggerInline,
         className: helpTriggerInlineStyles,
-        ref,
+        ref: mergeRefs([hoverRef, ref]),
         ...ariaLabelAttributes,
         ...rest,
         children: [
           /* @__PURE__ */ jsx("span", { className: styles["help-trigger-inline__text"], children }),
-          /* @__PURE__ */ jsx(HelpTriggerIconInternal, { weight, size: "inherit", htmlMarkup: "span" })
+          /* @__PURE__ */ jsx(HelpTriggerIconInternal, { weight, size: "inherit", htmlMarkup: "span", isHovered })
         ]
       }
     );

package/components/HelpTriggerInline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerInline = React.forwardRef<HTMLButtonElement, HelpTriggerInlineProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerInline}\n        className={helpTriggerInlineStyles}\n        ref={ref}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-inline__text']}>{children}</span>\n        <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} />\n      </button>\n    );\n  }\n);\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n"],"names":["React"],"mappings":";;;;;;;AAoCA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,KAAK,GAAG,QAAQ;AACjG,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,0BAA0B,WAAW,OAAO,qBAAqB,GAAG,SAAS;AAGjF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,2BAA2B,GAAI,UAAS;AAAA,8BAC/D,yBAAwB,EAAA,QAAgB,MAAM,WAAW,YAAY,OAAQ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChF;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerInline = React.forwardRef<HTMLButtonElement, HelpTriggerInlineProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n    const { hoverRef, isHovered } = useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerInline}\n        className={helpTriggerInlineStyles}\n        ref={mergeRefs([hoverRef, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-inline__text']}>{children}</span>\n        <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} isHovered={isHovered} />\n      </button>\n    );\n  }\n);\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n"],"names":["React"],"mappings":";;;;;;;;;AAsCA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,KAAK,GAAG,QAAQ;AACjG,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,0BAA0B,WAAW,OAAO,qBAAqB,GAAG,SAAS;AACnF,UAAM,EAAE,UAAU,UAAA,IAAc,SAA4B,KAA2C,KAAK;AAG1G,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;AAAA,QAC7B,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,2BAA2B,GAAI,UAAS;AAAA,8BAC/D,yBAAwB,EAAA,QAAgB,MAAM,WAAW,YAAY,QAAQ,UAAsB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACtG;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/components/HelpTriggerInline/styles.module.scss

@@ -12,7 +12,7 @@ $outline-xl-width: 2.5px;
 
 .help-trigger-inline {
   display: inline;
-  color: var(--core-color-plum-800);
+  color: var(--color-help-graphics-normal);
   cursor: pointer;
   text-decoration: none;
   background-color: transparent;
@@ -22,8 +22,10 @@ $outline-xl-width: 2.5px;
   font-size: clamp(0px, 1em, 48px);
   font-weight: inherit;
 
-  &:hover {
-    background-color: var(--core-color-plum-50);
+  &:hover,
+  &:active {
+    color: var(--color-help-graphics-verydark);
+    background-color: var(--color-help-background-transparent-onlight-hover);
   }
 
   &:focus-visible {
@@ -31,7 +33,9 @@ $outline-xl-width: 2.5px;
   }
 
   &:active {
-    text-decoration: solid underline;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
     text-underline-offset: 4.23px;
   }
 

package/components/HelpTriggerStandalone/styles.module.scss

@@ -33,14 +33,16 @@ $outline-xl-width: 2.5px;
     align-items: center;
     justify-content: center;
     min-height: var(--core-space-l);
-    color: var(--core-color-plum-800);
+    color: var(--color-help-graphics-normal);
     padding: 0 var(--core-space-3xs);
     font-size: 1rem;
     font-weight: 600;
     line-height: 1.2rem;
 
-    :hover > & {
-      background-color: var(--core-color-plum-50);
+    :hover > &,
+    :active > & {
+      color: var(--color-help-graphics-verydark);
+      background-color: var(--color-help-background-transparent-onlight-hover);
     }
 
     :focus-visible > & {
@@ -48,7 +50,9 @@ $outline-xl-width: 2.5px;
     }
 
     :active > & {
-      text-decoration: solid underline;
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-decoration-thickness: 1px;
       text-underline-offset: 4.23px;
     }
 

package/components/Highlighter/Highlighter.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface HighlightProps {
+    children?: React.ReactNode;
+    searchText?: string;
+}
+export declare const Highlighter: ({ children, searchText }: HighlightProps) => React.ReactElement | null;
+export default Highlighter;

package/components/Highlighter/Highlighter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Highlighter/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Highlighter } from './Highlighter';
+export * from './Highlighter';
+export default Highlighter;

package/components/Highlighter/index.js

@@ -0,0 +1,6 @@
+import { H as Highlighter } from "../../Highlighter.js";
+export {
+  Highlighter,
+  Highlighter as default
+};
+//# sourceMappingURL=index.js.map

package/components/Highlighter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Highlighter/styles.module.scss

@@ -0,0 +1,4 @@
+.highlight {
+  // todo: add styling
+  background-color: yellow;
+}

package/components/Highlighter/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  highlight: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;