@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/components/Modal/index.js

@@ -0,0 +1,209 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useEffect } from "react";
+import classNames from "classnames";
+import { ZIndex, AnalyticsId, IconSize } from "../../constants.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { useIsVisible } from "../../hooks/useIsVisible.js";
+import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
+import { palette } from "../../theme/palette.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { disableBodyScroll, enableBodyScroll } from "../../utils/scroll.js";
+import { u as uuid } from "../../uuid.js";
+import { B as Button } from "../../Button.js";
+import { C as Close } from "../../Close.js";
+import { I as Icon } from "../../Icon.js";
+import AlertSignFill from "../Icons/AlertSignFill.js";
+import AlertSignStroke from "../Icons/AlertSignStroke.js";
+import CheckOutline from "../Icons/CheckOutline.js";
+import Portal from "../Portal/index.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+var ModalVariants = /* @__PURE__ */ ((ModalVariants2) => {
+  ModalVariants2["normal"] = "normal";
+  ModalVariants2["warning"] = "warning";
+  ModalVariants2["error"] = "error";
+  ModalVariants2["success"] = "success";
+  ModalVariants2["image"] = "image";
+  return ModalVariants2;
+})(ModalVariants || {});
+var ModalSize = /* @__PURE__ */ ((ModalSize2) => {
+  ModalSize2["large"] = "large";
+  ModalSize2["medium"] = "medium";
+  return ModalSize2;
+})(ModalSize || {});
+const getVariantIcon = (variant) => {
+  if (variant === "error") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignFill, color: palette.cherry500 });
+  } else if (variant === "warning") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignStroke, color: palette.black });
+  } else if (variant === "success") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: CheckOutline, color: palette.kiwi900 });
+  }
+  return null;
+};
+const getIcon = (variant, icon) => {
+  const variantIcon = getVariantIcon(variant);
+  if (variantIcon) {
+    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: variantIcon });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: React__default.cloneElement(icon, {
+      size: IconSize.Small
+    }) });
+  }
+  return null;
+};
+const Modal = (props) => {
+  var _a, _b;
+  const {
+    footerContent,
+    variant = "normal",
+    primaryButtonText = "OK",
+    titleId = uuid(),
+    className = "",
+    size = "large",
+    zIndex = ZIndex.OverlayScreen,
+    role = "dialog"
+  } = props;
+  const topContent = React__default.useRef(null);
+  const modalContentRef = React__default.useRef(null);
+  const dialogRef = React__default.useRef(null);
+  useFocusTrap(dialogRef, true);
+  const topContentVisible = useIsVisible(topContent);
+  const bottomContent = React__default.useRef(null);
+  const bottomContentVisible = useIsVisible(bottomContent);
+  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;
+  useReturnFocusOnUnmount(dialogRef);
+  function handleKeyboardEvent(e) {
+    if (e.key === "Escape" && props.onClose) {
+      e.stopPropagation();
+      props.onClose();
+    }
+  }
+  function handleClickEvent(event) {
+    if (event.target && overlayRef.current === event.target && props.onClose) {
+      event.stopPropagation();
+      props.onClose();
+    }
+  }
+  const imageView = variant === "image";
+  const overlayRef = React__default.useRef(null);
+  const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess || footerContent;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });
+  useEffect(() => {
+    const overlayElement = overlayRef.current;
+    disableBodyScroll();
+    if (!props.disableCloseEvents && overlayElement) {
+      overlayElement.addEventListener("keydown", handleKeyboardEvent);
+      overlayElement.addEventListener("click", handleClickEvent);
+    }
+    return () => {
+      enableBodyScroll();
+      if (!props.disableCloseEvents && overlayElement) {
+        overlayElement.removeEventListener("keydown", handleKeyboardEvent);
+        overlayElement.removeEventListener("click", handleClickEvent);
+      }
+    };
+  }, [props.disableCloseEvents]);
+  useEffect(() => {
+    var _a2;
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  const dialogClasses = classNames(
+    className,
+    styles.modal,
+    variant && styles[`modal--${variant}`],
+    size && styles[`modal--${size}`],
+    contentIsScrollable && !showActions && styles["modal--no-actions"]
+  );
+  const titleClasses = classNames({
+    [styles["modal__title--error"]]: variant === "error",
+    [styles["modal__title--success"]]: variant === "success"
+    /* success */
+  });
+  const Component = /* @__PURE__ */ jsx("div", { "data-testid": "dialog-container", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: styles["modal-overlay"],
+      "data-testid": props.testId,
+      "data-analyticsid": AnalyticsId.Modal,
+      style: { zIndex },
+      children: /* @__PURE__ */ jsx("div", { className: styles.align, children: /* @__PURE__ */ jsxs("div", { className: dialogClasses, role, "aria-modal": "true", tabIndex: -1, ...ariaLabelAttributes, ref: dialogRef, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], {
+              [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(styles.modal__contentWrapper, {
+              [styles["modal__contentWrapper--image"]]: imageView
+            }),
+            tabIndex: contentIsScrollable ? 0 : void 0,
+            role: contentIsScrollable ? "region" : void 0,
+            ...contentIsScrollable ? ariaLabelAttributes : {},
+            ref: modalContentRef,
+            children: [
+              !props.noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modal__closeWrapper, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.modal__closeWrapper__close), children: /* @__PURE__ */ jsx(Close, { onClick: props.onClose, ariaLabel: props.ariaLabelCloseBtn }) }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`], {
+                    [styles["modal__contentWrapper__scroll--image"]]: imageView
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { ref: topContent }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.modal__contentWrapper__title, children: [
+                      getIcon(variant, props.icon),
+                      /* @__PURE__ */ jsx(Title, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: "h3", appearance: "title3", className: titleClasses, children: props.title }),
+                      props.afterTitleChildren && /* @__PURE__ */ jsx("div", { className: styles["modal__afterTitleChildren"], children: props.afterTitleChildren })
+                    ] }),
+                    imageView && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { className: styles["modal__contentWrapper__imageWrapper"], children: props.children }),
+                      /* @__PURE__ */ jsx("span", { className: styles["modal__contentWrapper__imageDescription"], children: props.description })
+                    ] }),
+                    !imageView && props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
+                    !imageView && !props.children && /* @__PURE__ */ jsx("p", { className: styles.modal__description, children: props.description }),
+                    /* @__PURE__ */ jsx("div", { ref: bottomContent })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], {
+              [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable
+            })
+          }
+        ),
+        showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
+          props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
+          props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText }),
+          footerContent
+        ] })
+      ] }) })
+    }
+  ) });
+  if (props.printable) {
+    const printModal = "print-modal";
+    return /* @__PURE__ */ jsxs(Portal, { className: printModal, testId: "print-modal", children: [
+      /* @__PURE__ */ jsx("style", { media: "print", children: `body > *:not(.${printModal}) {display: none;}` }),
+      Component
+    ] });
+  }
+  return Component;
+};
+export {
+  ModalSize,
+  ModalVariants,
+  Modal as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}

package/lib/components/NotificationPanel/NotificationPanel.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';
+export type NotificationCompactVariants = 'basic' | 'outline';
+export type NotificationPanelSizes = 'small' | 'medium' | 'large';
+export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
+export interface NotificationPanelProps {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds inner child elements. */
+    children?: React.ReactNode;
+    /** Adds inner expander elements. */
+    expanderChildren?: React.ReactNode;
+    /** Text for expanderButton. */
+    expanderButtonText?: string;
+    /** Text for expanderButton when closed. */
+    expanderButtonClosedText?: string;
+    /** Makes expander be open from start. */
+    expanderOpenFromStart?: boolean;
+    /** Changes the visual representation of the notification panel. */
+    variant?: NotificationPanelVariants;
+    /** Makes the panel more compact. Available in basic and outline. */
+    compactVariant?: NotificationCompactVariants;
+    /** Sets a fixed size for the content container. */
+    size?: NotificationPanelSizes;
+    /** Used in combination with dismissiable property to close the notification panel. */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Toggles the close button in the top right corner. */
+    dismissable?: boolean;
+    /** Enables a fluid outer container that spans the entire width of parent. */
+    fluid?: boolean;
+    /** Sets a label for the notification panel. */
+    label?: string;
+    /** Changes the underlying element of the label. */
+    labelHtmlMarkup?: LabelTags;
+    /** Close button aria-label */
+    ariaLabelCloseBtn?: string;
+    /** Custom id for the label */
+    labelId?: string;
+    /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to "alert" unless the role-prop is also set. */
+    role?: 'region' | 'alert' | 'status';
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const NotificationPanel: React.ForwardRefExoticComponent<NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default NotificationPanel;

package/lib/components/NotificationPanel/NotificationPanel.test.d.ts

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

package/lib/components/NotificationPanel/index.d.ts

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

package/lib/components/NotificationPanel/index.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { N as NotificationBadge } from "../../NotificationBadge.js";
+import { C as Close } from "../../Close.js";
+import { E as Expander } from "../../Expander.js";
+import styles from "./styles.module.scss";
+const FluidWrapper = ({ fluid, children }) => {
+  if (fluid) {
+    const fluidClasses = classNames(styles["fluid-wrapper"]);
+    return /* @__PURE__ */ jsx("div", { className: fluidClasses, children });
+  }
+  return children;
+};
+const NotificationPanel = React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    variant = "info",
+    dismissable = false,
+    onClick,
+    expanderChildren,
+    expanderButtonText,
+    expanderButtonClosedText,
+    expanderOpenFromStart = false,
+    compactVariant,
+    label,
+    labelHtmlMarkup = "h1",
+    fluid = false,
+    size,
+    className,
+    labelId,
+    role,
+    testId
+  } = props;
+  const uuid = useUuid(labelId);
+  const [expanderOpen, setExpanderOpen] = React__default.useState(expanderOpenFromStart);
+  const isMobile = useIsMobileBreakpoint();
+  const renderContent = () => {
+    const outlineVariant = compactVariant === "outline";
+    const contentClasses = classNames(styles["notification-panel__content"]);
+    const labelClasses = classNames(styles["notification-panel__label"], {
+      [styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
+      [styles["notification-panel__label--compact"]]: !!compactVariant,
+      [styles["notification-panel__label--outline"]]: outlineVariant
+    });
+    const childrenClasses = classNames(styles["notification-panel__children"], {
+      [styles["notification-panel__children--with-label"]]: label,
+      [styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
+      [styles["notification-panel__children--outline"]]: outlineVariant
+    });
+    const CustomTag = labelHtmlMarkup;
+    return /* @__PURE__ */ jsxs("div", { className: contentClasses, id: !label ? uuid : void 0, children: [
+      label && /* @__PURE__ */ jsx(CustomTag, { className: labelClasses, id: uuid, children: label }),
+      children && /* @__PURE__ */ jsx("div", { className: childrenClasses, children }),
+      expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && /* @__PURE__ */ jsx(
+        Expander,
+        {
+          title: expanderOpen ? expanderButtonText : expanderButtonClosedText,
+          onExpand: setExpanderOpen,
+          expanded: expanderOpen,
+          testId: "expand",
+          children: expanderChildren
+        }
+      )
+    ] });
+  };
+  const notificationPanelClasses = classNames(
+    styles["notification-panel"],
+    styles[`notification-panel--${variant}`],
+    size && styles[`notification-panel--${size}`],
+    {
+      [styles["notification-panel--compact"]]: !!compactVariant,
+      [styles["notification-panel--compact--basic"]]: compactVariant === "basic",
+      [styles["notification-panel--compact--outline"]]: compactVariant === "outline",
+      [styles["notification-panel--with-content"]]: expanderChildren || label && children,
+      [styles["notification-panel--dismissable"]]: dismissable
+    },
+    className
+  );
+  const ariaRole = role || variant === "error" && "alert" || void 0;
+  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : void 0;
+  return /* @__PURE__ */ jsx(FluidWrapper, { fluid, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: ariaRole,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.NotificationPanel,
+      className: notificationPanelClasses,
+      ...ariaLabelAttributes,
+      children: [
+        /* @__PURE__ */ jsx(
+          NotificationBadge,
+          {
+            variant,
+            size: compactVariant || isMobile ? IconSize.XSmall : IconSize.Small,
+            className: styles["notification-panel__icon"]
+          }
+        ),
+        dismissable && /* @__PURE__ */ jsx("span", { className: styles["notification-panel__close"], children: /* @__PURE__ */ jsx(Close, { ariaLabel: props.ariaLabelCloseBtn, onClick, color: "black" }) }),
+        renderContent()
+      ]
+    }
+  ) });
+});
+export {
+  NotificationPanel as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/NotificationPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["React"],"mappings":"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"}

package/lib/components/Panel/Panel.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { PanelTitleProps } from './PanelTitle';
+import { HNDesignsystemPanel } from '../../resources/Resources';
+export declare enum PanelLayout {
+    vertical = "vertical",
+    horizontal = "horizontal",
+    combined = "combined",
+    bAsRightCol = "bAsRightCol"
+}
+export type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;
+export declare enum PanelVariant {
+    fill = "fill",
+    line = "line",
+    outline = "outline"
+}
+export declare enum PanelStacking {
+    default = "default",
+    bFirst = "bFirst"
+}
+export declare enum PanelStatus {
+    none = "none",
+    new = "new",
+    error = "error",
+    draft = "draft"
+}
+export interface PanelProps {
+    /** Aria label on call to action button */
+    buttonBottomAriaLabel?: string;
+    /** Sets the text on the bottom call to action button */
+    buttonBottomText?: string;
+    /** Sets the action on the bottom call to action button */
+    buttonBottomOnClick?: () => void;
+    /** Expands or collapses the panel. Only applicable when ExpandedContent is used */
+    expanded?: boolean;
+    /** Sets the layout and order of the content boxes */
+    layout?: PanelLayout;
+    /** Sets the visual variant of panel */
+    variant?: PanelVariant;
+    /** Sets the color for panel if it has variant fill */
+    color?: PanelColors;
+    /** Sets classes on the outermost container of the panel */
+    className?: string;
+    /** Action called when toggling expansion of ExpandedContent */
+    onExpand?: (isExpanded?: boolean) => void;
+    /** Sets the stacking order of the content boxes */
+    stacking?: PanelStacking;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Children elements to be rendered inside the panel */
+    children?: React.ReactNode;
+    /** Displays a status on the left side: default normal */
+    status?: PanelStatus;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemPanel>;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
+}
+declare const PanelRoot: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContentProps {
+    /** Children elements to be rendered inside the content box */
+    children?: React.ReactNode;
+}
+export declare const PreContainer: React.FC<ContentProps>;
+export declare const A: React.FC<ContentProps>;
+export declare const B: React.FC<ContentProps>;
+export declare const C: React.FC<ContentProps>;
+export declare const ExpandedContent: React.FC<ContentProps>;
+type PanelComponent = typeof PanelRoot & {
+    PreContainer: React.FC<ContentProps>;
+    Title: React.FC<PanelTitleProps>;
+    A: React.FC<ContentProps>;
+    B: React.FC<ContentProps>;
+    C: React.FC<ContentProps>;
+    ExpandedContent: React.FC<ContentProps>;
+};
+declare const Panel: PanelComponent;
+export default Panel;

package/lib/components/Panel/Panel.test.d.ts

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

package/lib/components/Panel/PanelExamples.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const MedisinskFødselsregister: React.FC;
+export declare const TimeAvtale: React.FC;
+export declare const PasientReiser: React.FC;
+export declare const Helsekontakter: React.FC;
+export declare const Dokumentliste: React.FC;
+export declare const DokumentlisteDeling: React.FC;
+export declare const NyMelding: React.FC;

package/lib/components/Panel/PanelTitle/PanelTitle.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface PanelTitleProps {
+    /** Badge displayed in title */
+    badge?: React.ReactNode;
+    /** Icon displayed in title. Only IconSize Small is supported */
+    icon?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title text */
+    title: string | React.ReactNode;
+    /** Title HTML markup */
+    titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
+}
+declare const PanelTitle: React.FC<PanelTitleProps>;
+export default PanelTitle;

package/lib/components/Panel/PanelTitle/index.d.ts

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

package/lib/components/Panel/PanelTitle/index.js

@@ -0,0 +1,5 @@
+import { P as PanelTitle } from "../../../PanelTitle.js";
+export {
+  PanelTitle as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Panel/PanelTitle/index.js.map

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

package/lib/components/Panel/Paneldocs.d.ts

@@ -0,0 +1 @@
+export declare const PanelDocs: () => React.JSX.Element;

package/lib/components/Panel/index.d.ts

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

package/lib/components/Panel/index.js

@@ -0,0 +1,15 @@
+import { P as Panel } from "../../Panel.js";
+import { A, B, C, E, a, c, d, b, e } from "../../Panel.js";
+export {
+  A,
+  B,
+  C,
+  E as ExpandedContent,
+  a as PanelLayout,
+  c as PanelStacking,
+  d as PanelStatus,
+  b as PanelVariant,
+  e as PreContainer,
+  Panel as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Panel/index.js.map

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

package/lib/components/Panel/resourceHelper.d.ts

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

package/lib/components/PanelList/PanelList.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { PanelVariant } from '../Panel/Panel';
+export interface PanelListProps {
+    /** Panels to render inside the PanelList */
+    children?: React.ReactNode;
+    /** Changes the visual representation of the panel. Default: fill */
+    variant?: PanelVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
+}
+declare const PanelList: React.ForwardRefExoticComponent<PanelListProps & React.RefAttributes<HTMLDivElement>>;
+export default PanelList;

package/lib/components/PanelList/PanelList.test.d.ts

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

package/lib/components/PanelList/index.d.ts

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