@helsenorge/designsystem-react 11.1.0 → 11.2.0-beta.0

package/components/PopOver/PopOver.d.ts

@@ -1,27 +1,31 @@
 import { default as React } from 'react';
+import { Placement } from '@floating-ui/react';
 export declare enum PopOverVariant {
     positionautomatic = "positionautomatic",
     positionbelow = "positionbelow",
     positionabove = "positionabove"
 }
-export type PopOverRole = 'tooltip';
+export type PopOverRole = 'dialog' | 'tooltip';
+export type PopOverPlacement = Placement;
 export interface PopOverProps {
     /** Id of the PopOver */
     id?: string;
-    /** Content shown inside PopOver. Note that if role="tooltip", you must not include interactive/focusable elements. */
+    /** Content shown inside PopOver. */
     children: React.ReactNode;
     /** Ref for the element the PopOver is placed upon */
     controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;
     /** Ref for the element the PopOver is placed upon */
     popOverRef?: React.RefObject<HTMLDivElement>;
-    /** Show the popover. Only applies when role=tooltip. Default: false. */
+    /** @deprecated Show the popover. Only applies when role=tooltip. Default: false. */
     show?: boolean;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Adds custom classes to the arrow element. */
+    /** @deprecated Adds custom classes to the arrow element. */
     arrowClassName?: string;
-    /** Determines the placement of the popover. Default: automatic positioning. */
+    /** @deprecated Determines the placement of the popover. Default: automatic positioning. */
     variant?: keyof typeof PopOverVariant;
+    /** Sets the placement of the popover relative to the trigger. */
+    placement?: PopOverPlacement;
     /** Sets role of the PopOver element */
     role?: PopOverRole;
     /** Sets the data-testid attribute. */

package/components/PopOver/index.js

@@ -1,7 +1,7 @@
-import { a as PopOver } from "../../PopOver.js";
-import { P } from "../../PopOver.js";
+import { P as PopOver } from "../../PopOver.js";
+import { a } from "../../PopOver.js";
 export {
-  P as PopOverVariant,
+  a as PopOverVariant,
   PopOver as default
 };
 //# sourceMappingURL=index.js.map

package/components/PopOver/styles.module.scss

@@ -1,63 +1,21 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/font-mixins' as fonts;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .popover {
   $popover: &;
 
-  display: flex;
-  position: fixed;
-  align-items: flex-start !important;
-  max-width: 23.3125rem;
+  width: max-content;
+  max-width: min(23.3125rem, 100vw);
   text-align: start;
-  font-family: inherit;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
-  background-color: palette.$white;
+  background-color: var(--core-color-white);
   z-index: 3;
-  visibility: hidden;
-  border: spacers.getSpacer(4xs) solid palette.$plum600;
-  border-radius: 0.5625rem;
-  box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--color-base-border-onlight);
+  border-radius: 4px;
+  filter: drop-shadow(0 4px 16px rgba(0 0 0 / 30%));
+  padding: var(--core-space-s);
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
-  }
-
-  &--visible {
-    visibility: visible;
-  }
-
-  &__arrow {
-    --drop-shadow-color: #{palette.$plum600};
-
-    width: 0;
-    height: 0;
-    position: fixed;
-    border-style: solid;
-    border-color: transparent;
-    z-index: 3;
-    visibility: hidden;
-
-    &--over {
-      border-width: 0.625rem;
-      border-bottom-color: palette.$white;
-      filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
-    }
-
-    &--under {
-      border-width: 0.625rem;
-      border-top-color: palette.$white;
-      filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
-    }
-
-    &--visible {
-      visibility: visible;
-    }
-  }
+  @include fonts.help-text;
 }

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

@@ -1,10 +1,5 @@
 export type Styles = {
   popover: string;
-  popover__arrow: string;
-  'popover__arrow--over': string;
-  'popover__arrow--under': string;
-  'popover__arrow--visible': string;
-  'popover--visible': string;
 };
 
 export type ClassNames = keyof Styles;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.1.0",
+  "version": "11.2.0-beta.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_font-mixins.scss

@@ -238,3 +238,25 @@
     line-height: 1.625rem;
   }
 }
+
+@mixin help-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.575rem;
+  }
+}
+
+@mixin help-trigger-text {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}

package/scss/typography.module.scss

@@ -132,6 +132,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.definition-list-data;
 }
 
+.help-text {
+  @include fonts.help-text;
+}
+
+.help-trigger-text {
+  @include fonts.help-trigger-text;
+}
+
 .anchorlink-wrapper {
   a {
     display: inline;

package/scss/typography.module.scss.d.ts

@@ -6,6 +6,8 @@ export type Styles = {
   'definition-list-type': string;
   'focused-content': string;
   form: string;
+  'help-text': string;
+  'help-trigger-text': string;
   'image-caption': string;
   'image-credit': string;
   'input-text': string;

package/scss/typography.stories.tsx

@@ -121,6 +121,14 @@ export const DefinitionListData: Story = {
   render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
 };
 
+export const HelpText: Story = {
+  render: args => <div className={designsystemtypography['help-text']}>{args.tekst}</div>,
+};
+
+export const HelpTriggerText: Story = {
+  render: args => <div className={designsystemtypography['help-trigger-text']}>{args.tekst}</div>,
+};
+
 export const AnchorlinkWrapper: Story = {
   render: args => (
     <div className={designsystemtypography['anchorlink-wrapper']}>

package/HelpBubble.js

@@ -1,78 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;"}

package/hooks/useIsMobileBreakpoint.d.ts

@@ -1 +0,0 @@
-export declare const useIsMobileBreakpoint: () => boolean;

package/hooks/useIsMobileBreakpoint.js

@@ -1,10 +0,0 @@
-import { useBreakpoint } from "./useBreakpoint.js";
-import { breakpoints } from "../theme/grid.js";
-const useIsMobileBreakpoint = () => {
-  const breakpoint = useBreakpoint();
-  return breakpoint < breakpoints.md;
-};
-export {
-  useIsMobileBreakpoint
-};
-//# sourceMappingURL=useIsMobileBreakpoint.js.map

package/hooks/useIsMobileBreakpoint.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsMobileBreakpoint.js","sources":["../../src/hooks/useIsMobileBreakpoint.ts"],"sourcesContent":["import { useBreakpoint } from './useBreakpoint';\nimport { breakpoints } from '../theme/grid';\n\nexport const useIsMobileBreakpoint = (): boolean => {\n  const breakpoint = useBreakpoint();\n  return breakpoint < breakpoints.md;\n};\n"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,MAAe;AAClD,QAAM,aAAa,cAAc;AACjC,SAAO,aAAa,YAAY;AAClC;"}