@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Modal/Modal.js

@@ -1,66 +1,66 @@
 import t, { useEffect as N } from "react";
 import n from "classnames";
-import { ZIndex as R, AnalyticsId as P, IconSize as c } from "../../constants.js";
-import { useFocusTrap as $ } from "../../hooks/useFocusTrap.js";
+import { ZIndex as W, AnalyticsId as R, IconSize as c } from "../../constants.js";
+import { useFocusTrap as P } from "../../hooks/useFocusTrap.js";
 import { useIsVisible as I } from "../../hooks/useIsVisible.js";
 import { palette as u } from "../../theme/palette.js";
-import { uuid as A } from "../../utils/uuid.js";
+import { uuid as $ } from "../../utils/uuid.js";
 import w from "../Button/Button.js";
-import F from "../Close/Close.js";
+import A from "../Close/Close.js";
 import { Icon as _ } from "../Icon/Icon.js";
-import H from "../Icons/AlertSignFill.js";
-import K from "../Icons/AlertSignStroke.js";
-import O from "../Icons/CheckOutline.js";
-import D from "../Portal/index.js";
-import M from "../Title/Title.js";
+import F from "../Icons/AlertSignFill.js";
+import H from "../Icons/AlertSignStroke.js";
+import K from "../Icons/CheckOutline.js";
+import O from "../Portal/index.js";
+import { Title as D } from "../Title/Title.js";
 import a from "../Modal/styles.module.scss";
 var V = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(V || {}), Z = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(Z || {});
 const j = {
   variant: "normal",
   primaryButtonText: "OK",
-  titleId: A(),
+  titleId: $(),
   className: "",
   size: "large",
-  zIndex: R.Modal
-}, q = (e) => e === "error" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: H, color: u.cherry500 }) : e === "warning" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: K, color: u.black }) : e === "success" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: O, color: u.kiwi900 }) : null, G = (e, r) => {
+  zIndex: W.Modal
+}, q = (e) => e === "error" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: F, color: u.cherry500 }) : e === "warning" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: H, color: u.black }) : e === "success" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: K, color: u.kiwi900 }) : null, G = (e, r) => {
   const o = q(e);
   return o ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, o) : r ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, t.cloneElement(r, {
     size: c.Small
   })) : null;
-}, B = (e) => {
+}, J = (e) => {
   var C, h;
   const r = t.useRef(null), o = t.useRef(null), m = t.useRef(null);
-  $(m, !0);
-  const k = I(r), f = t.useRef(null), z = I(f), s = o.current && o.current.scrollHeight > o.current.clientHeight;
+  P(m, !0);
+  const B = I(r), f = t.useRef(null), k = I(f), s = o.current && o.current.scrollHeight > o.current.clientHeight;
   function v(l) {
     l.key === "Escape" && e.onClose && (l.stopPropagation(), e.onClose());
   }
   function E(l) {
     l.target && d.current === l.target && e.onClose && (l.stopPropagation(), e.onClose());
   }
-  function x() {
+  function z() {
     document.body.style.overflow = "hidden";
   }
-  function L() {
+  function x() {
     document.body.style.removeProperty("overflow");
   }
-  const i = e.variant === "image", d = t.useRef(null), g = e.secondaryButtonText && ((C = e.secondaryButtonText) == null ? void 0 : C.length) > 0 || e.onSuccess, S = e.ariaLabelledBy ? void 0 : e.ariaLabel, y = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : e.titleId;
+  const i = e.variant === "image", d = t.useRef(null), g = e.secondaryButtonText && ((C = e.secondaryButtonText) == null ? void 0 : C.length) > 0 || e.onSuccess, L = e.ariaLabelledBy ? void 0 : e.ariaLabel, y = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : e.titleId;
   N(() => {
     const l = d.current;
-    return x(), !e.disableCloseEvents && l && (l.addEventListener("keydown", v), l.addEventListener("click", E)), () => {
-      L(), !e.disableCloseEvents && l && (l.removeEventListener("keydown", v), l.removeEventListener("click", E));
+    return z(), !e.disableCloseEvents && l && (l.addEventListener("keydown", v), l.addEventListener("click", E)), () => {
+      x(), !e.disableCloseEvents && l && (l.removeEventListener("keydown", v), l.removeEventListener("click", E));
     };
   }, [e.disableCloseEvents]), N(() => {
     var l;
     (l = m.current) == null || l.focus();
   }, []);
-  const T = n(
+  const S = n(
     e.className,
     a.modal,
     e.variant && a[`modal--${e.variant}`],
     e.size && a[`modal--${e.size}`],
     s && !g && a["modal--no-actions"]
-  ), W = n({
+  ), T = n({
     [a["modal__title--error"]]: e.variant === "error",
     [a["modal__title--success"]]: e.variant === "success"
     /* success */
@@ -70,17 +70,17 @@ const j = {
       ref: d,
       className: a["modal-overlay"],
       "data-testid": e.testId,
-      "data-analyticsid": P.Modal,
+      "data-analyticsid": R.Modal,
       style: { zIndex: e.zIndex }
     },
     /* @__PURE__ */ t.createElement("div", { className: a.align }, /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: T,
+        className: S,
         role: "dialog",
         "aria-modal": "true",
         tabIndex: -1,
-        "aria-label": S,
+        "aria-label": L,
         "aria-labelledby": y,
         ref: m
       },
@@ -88,7 +88,7 @@ const j = {
         "div",
         {
           className: n(a.modal__shadow, a["modal__shadow--top"], {
-            [a["modal__shadow--show"]]: !k && s
+            [a["modal__shadow--show"]]: !B && s
           })
         }
       ),
@@ -100,7 +100,7 @@ const j = {
           }),
           ref: o
         },
-        !e.noCloseButton && /* @__PURE__ */ t.createElement("div", { className: a.modal__closeWrapper }, /* @__PURE__ */ t.createElement("div", { className: n(a.modal__closeWrapper__close) }, /* @__PURE__ */ t.createElement(F, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }))),
+        !e.noCloseButton && /* @__PURE__ */ t.createElement("div", { className: a.modal__closeWrapper }, /* @__PURE__ */ t.createElement("div", { className: n(a.modal__closeWrapper__close) }, /* @__PURE__ */ t.createElement(A, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }))),
         /* @__PURE__ */ t.createElement(
           "div",
           {
@@ -109,7 +109,7 @@ const j = {
             })
           },
           /* @__PURE__ */ t.createElement("div", { ref: r }),
-          /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__title }, G(e.variant, e.icon), /* @__PURE__ */ t.createElement(M, { id: y, htmlMarkup: "h3", appearance: "title3", className: W }, e.title), e.afterTitleChildren && /* @__PURE__ */ t.createElement("div", { className: a.modal__afterTitleChildren }, e.afterTitleChildren)),
+          /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__title }, G(e.variant, e.icon), /* @__PURE__ */ t.createElement(D, { id: y, htmlMarkup: "h3", appearance: "title3", className: T }, e.title), e.afterTitleChildren && /* @__PURE__ */ t.createElement("div", { className: a.modal__afterTitleChildren }, e.afterTitleChildren)),
           i && /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__imageWrapper }, e.children), /* @__PURE__ */ t.createElement("span", { className: a.modal__contentWrapper__imageDescription }, e.description)),
           !i && e.children && /* @__PURE__ */ t.createElement("div", null, e.children),
           !i && !e.children && /* @__PURE__ */ t.createElement("p", { className: a.modal__description }, e.description),
@@ -120,7 +120,7 @@ const j = {
         "div",
         {
           className: n(a.modal__shadow, a["modal__shadow--bottom"], {
-            [a["modal__shadow--show"]]: !z && s
+            [a["modal__shadow--show"]]: !k && s
           })
         }
       ),
@@ -129,15 +129,14 @@ const j = {
   ));
   if (e.printable) {
     const l = "print-modal";
-    return /* @__PURE__ */ t.createElement(D, { className: l, testId: "print-modal" }, /* @__PURE__ */ t.createElement("style", { media: "print" }, `body > *:not(.${l}) {display: none;}`), b);
+    return /* @__PURE__ */ t.createElement(O, { className: l, testId: "print-modal" }, /* @__PURE__ */ t.createElement("style", { media: "print" }, `body > *:not(.${l}) {display: none;}`), b);
   }
   return b;
 };
-B.defaultProps = j;
-const se = B;
+J.defaultProps = j;
 export {
   Z as ModalSize,
   V as ModalVariants,
-  se as default
+  J as default
 };
 //# sourceMappingURL=Modal.js.map

package/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.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 { palette } from '../../theme/palette';\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  /** 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}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\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 = (props: ModalProps): JSX.Element => {\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\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  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\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    props.className,\n    styles.modal,\n    props.variant && styles[`modal--${props.variant}`],\n    props.size && styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.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: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\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              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(props.size && styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} 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'], props.size && styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\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\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal","Modal$1"],"mappings":"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"}
+{"version":3,"file":"Modal.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 { palette } from '../../theme/palette';\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  /** 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}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\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 = (props: ModalProps): JSX.Element => {\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\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  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\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    props.className,\n    styles.modal,\n    props.variant && styles[`modal--${props.variant}`],\n    props.size && styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.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: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\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              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(props.size && styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} 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'], props.size && styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\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\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -175,22 +175,22 @@
 
     &__scroll {
       &--large {
-        padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
+        padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs) getSpacer(xl);
+          padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
         }
       }
 
       &--medium {
-        padding: getSpacer(l) getSpacer(m) getSpacer(2xs) getSpacer(m);
+        padding: getSpacer(l) getSpacer(m) getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
+          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
         }
       }
       &--large#{&}--image {
-        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l) getSpacer(2xs);
+        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
       }
     }
 
@@ -234,15 +234,15 @@
     }
 
     &--large {
-      padding: getSpacer(l) getSpacer(m) 0 getSpacer(m);
+      padding: getSpacer(l) getSpacer(m) 0;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(l) getSpacer(xl) 0 getSpacer(xl);
+        padding: getSpacer(l) getSpacer(xl) 0;
       }
     }
 
     &--medium {
-      padding: getSpacer(m) getSpacer(m) 0 getSpacer(m);
+      padding: getSpacer(m) getSpacer(m) 0;
     }
   }
 

package/components/NotificationPanel/NotificationPanel.js

@@ -2,9 +2,9 @@ import t from "react";
 import c from "classnames";
 import { AnalyticsId as R, IconSize as C } from "../../constants.js";
 import { useUuid as T } from "../../hooks/useUuid.js";
-import { getColor as $ } from "../../theme/currys/color.js";
-import { getAriaLabelAttributes as F } from "../../utils/accessibility.js";
-import V from "../Badge/NotificationBadge.js";
+import { getColor as F } from "../../theme/currys/color.js";
+import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
+import $ from "../Badge/NotificationBadge.js";
 import H from "../Close/Close.js";
 import M from "../Expander/Expander.js";
 import e from "../NotificationPanel/styles.module.scss";
@@ -14,7 +14,7 @@ const U = ({ fluid: r, children: s }) => {
     return /* @__PURE__ */ t.createElement("div", { className: i }, s);
   }
   return s;
-}, W = t.forwardRef((r, s) => {
+}, Z = t.forwardRef((r, s) => {
   const {
     children: i,
     variant: o = "info",
@@ -34,20 +34,20 @@ const U = ({ fluid: r, children: s }) => {
     role: g,
     testId: w
   } = r, p = T(S), A = () => {
-    const b = a === "outline", P = c(e["notification-panel__content"]), k = c(e["notification-panel__label"], {
+    const b = a === "outline", k = c(e["notification-panel__content"]), y = c(e["notification-panel__label"], {
       [e["notification-panel__label--no-content"]]: !i && !l,
       [e["notification-panel__label--compact"]]: !!a,
       [e["notification-panel__label--outline"]]: b
-    }), y = c(e["notification-panel__children"], {
+    }), z = c(e["notification-panel__children"], {
       [e["notification-panel__children--with-label"]]: n,
       [e["notification-panel__children--expander-no-label"]]: l && !n,
       [e["notification-panel__children--outline"]]: b
-    }), z = h, [x, O] = t.useState(N);
-    return /* @__PURE__ */ t.createElement("div", { className: P, id: n ? void 0 : p }, n && /* @__PURE__ */ t.createElement(z, { className: k, id: p }, n), i && /* @__PURE__ */ t.createElement("div", { className: y }, i), l && d && f && !a && /* @__PURE__ */ t.createElement(
+    }), O = h, [x, P] = t.useState(N);
+    return /* @__PURE__ */ t.createElement("div", { className: k, id: n ? void 0 : p }, n && /* @__PURE__ */ t.createElement(O, { className: y, id: p }, n), i && /* @__PURE__ */ t.createElement("div", { className: z }, i), l && d && f && !a && /* @__PURE__ */ t.createElement(
       M,
       {
         title: x ? d : f,
-        onExpand: O,
+        onExpand: P,
         expanded: x,
         testId: "expand"
       },
@@ -65,7 +65,7 @@ const U = ({ fluid: r, children: s }) => {
       [e["notification-panel--dismissable"]]: m
     },
     I
-  ), _ = g || (o === "alert" || o === "error") && "alert" || void 0, L = _ ? F({ label: n, id: p }) : void 0;
+  ), _ = g || (o === "alert" || o === "error") && "alert" || void 0, L = _ ? V({ label: n, id: p }) : void 0;
   return /* @__PURE__ */ t.createElement(U, { fluid: v }, /* @__PURE__ */ t.createElement(
     "div",
     {
@@ -77,18 +77,18 @@ const U = ({ fluid: r, children: s }) => {
       ...L
     },
     /* @__PURE__ */ t.createElement(
-      V,
+      $,
       {
         variant: o == "alert" ? "error" : o,
         size: a ? C.XSmall : C.Small,
         className: e["notification-panel__icon"]
       }
     ),
-    m && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(H, { ariaLabel: r.ariaLabelCloseBtn, onClick: E, color: $("black") })),
+    m && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(H, { ariaLabel: r.ariaLabelCloseBtn, onClick: E, color: F("black") })),
     A()
   ));
-}), ee = W;
+});
 export {
-  ee as default
+  Z as default
 };
 //# sourceMappingURL=NotificationPanel.js.map

package/components/NotificationPanel/NotificationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\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' | 'alert' | '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';\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 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    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\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 === 'alert' || 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 == 'alert' ? 'error' : variant}\n          size={compactVariant ? 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={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor","NotificationPanel$1"],"mappings":"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"}
+{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\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' | 'alert' | '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';\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 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    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\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 === 'alert' || 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 == 'alert' ? 'error' : variant}\n          size={compactVariant ? 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={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -41,7 +41,7 @@
   }
 
   &--dismissable {
-    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(m) getSpacer(2xs);
+    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(m);
   }
 
   &--small {
@@ -155,7 +155,7 @@
 
   &__label {
     font-weight: 700;
-    margin: getSpacer(2xs) 0 0 0;
+    margin: getSpacer(2xs) 0 0;
 
     &--compact {
       font-size: $font-size-xs;
@@ -185,7 +185,7 @@
     }
 
     &--expander-no-label {
-      margin: getSpacer(2xs) 0 0 0;
+      margin: getSpacer(2xs) 0 0;
 
       @media (max-width: map.get($grid-breakpoints, lg)) {
         padding-top: 0;

package/components/Panel/Panel.js

@@ -15,7 +15,7 @@ import pe from "../Icons/ChevronDown.js";
 import _e from "../Icons/ChevronUp.js";
 import Ee from "../Icons/Pencil.js";
 import fe from "../Icons/Watch.js";
-import ye from "../Title/Title.js";
+import { Title as ye } from "../Title/Title.js";
 import e from "../Panel/styles.module.scss";
 var ve = /* @__PURE__ */ ((a) => (a.normal = "normal", a.new = "new", a.error = "error", a.draft = "draft", a))(ve || {}), be = /* @__PURE__ */ ((a) => (a.fill = "fill", a.white = "white", a.stroke = "stroke", a.line = "line", a))(be || {}), Ce = /* @__PURE__ */ ((a) => (a.layout1 = "layout1", a.layout2 = "layout2", a.layout3a = "layout3a", a.layout3b = "layout3b", a.layout3c = "layout3c", a))(Ce || {});
 const S = ({ status: a, statusMessage: n }) => {
@@ -77,7 +77,7 @@ const S = ({ status: a, statusMessage: n }) => {
     [e["panel__icon--no-content"]]: !a && !n
   });
   return /* @__PURE__ */ t.createElement("div", { className: o }, /* @__PURE__ */ t.createElement(S, { status: d, statusMessage: p }), /* @__PURE__ */ t.createElement(L, null, m), l && /* @__PURE__ */ t.createElement("div", { className: y }, l), /* @__PURE__ */ t.createElement("div", null, i, a), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column"] }, n && /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column__content-b"] }, n), s));
-}, ge = t.forwardRef(function(n, m) {
+}, Oe = t.forwardRef(function(n, m) {
   const {
     buttonAriaLabel: s,
     buttonAriaLabelledById: l,
@@ -89,46 +89,46 @@ const S = ({ status: a, statusMessage: n }) => {
     className: y,
     containerAsButton: w = !1,
     contentA: M,
-    contentB: $,
+    contentB: z,
     contentHeader: F,
-    date: z,
+    date: B,
     expanded: U = !1,
     focusable: O = !1,
-    icon: B,
+    icon: D,
     layout: v = "layout2",
-    noTopBorder: P,
-    onExpand: D,
-    renderChildrenWhenClosed: q = !1,
+    noTopBorder: q,
+    onExpand: R,
+    renderChildrenWhenClosed: G = !1,
     status: _ = "normal",
     statusMessage: I,
-    target: G = "_self",
-    testId: J,
-    time: R,
+    target: J = "_self",
+    testId: K,
+    time: $,
     title: g,
-    titleHtmlMarkup: K = "h2",
+    titleHtmlMarkup: P = "h2",
     url: x,
     variant: E = "fill"
     /* fill */
-  } = n, [f, Q] = se(U, D), k = H(), N = H(), j = I && _ === "new", h = typeof $ > "u", Y = v === "layout1" || h, Z = !h && v === "layout2", V = !h && (v === "layout3a" || v === "layout3b" || v === "layout3c"), ee = r(e["panel-wrapper"], y), te = r(e.panel, {
+  } = n, [f, Q] = se(U, R), k = H(), N = H(), j = I && _ === "new", h = typeof z > "u", Y = v === "layout1" || h, Z = !h && v === "layout2", V = !h && (v === "layout3a" || v === "layout3b" || v === "layout3c"), ee = r(e["panel-wrapper"], y), te = r(e.panel, {
     [e["panel--fill"]]: E === "fill",
     [e["panel--stroke"]]: E === "stroke",
     [e["panel--white"]]: E === "white",
     [e["panel--line"]]: E === "line",
-    [e["panel--no-top-border"]]: E === "line" && P,
+    [e["panel--no-top-border"]]: E === "line" && q,
     [e["panel--selected"]]: f,
     [e["panel--new"]]: _ === "new",
     [e["panel--draft"]]: _ === "draft",
     [e["panel--error"]]: _ === "error",
     [e["panel--status"]]: _ && _ !== "normal",
-    [e["panel--with-icon"]]: B,
+    [e["panel--with-icon"]]: D,
     [e["panel--button"]]: w,
-    [e["panel--clickable"]]: o || x || D || i || w
+    [e["panel--clickable"]]: o || x || R || i || w
   }), ae = () => {
     const u = o || x || i, b = r(e["panel__btn-container"], {
       [e["panel__btn-container--no-content-b"]]: h,
       [e["panel__btn-container--no-button"]]: !u
     });
-    return (u || z || R) && /* @__PURE__ */ t.createElement("div", { className: b }, /* @__PURE__ */ t.createElement(Ne, { date: z, time: R }), u && /* @__PURE__ */ t.createElement("div", { className: e["panel__details-btn"] }, ne()));
+    return (u || B || $) && /* @__PURE__ */ t.createElement("div", { className: b }, /* @__PURE__ */ t.createElement(Ne, { date: B, time: $ }), u && /* @__PURE__ */ t.createElement("div", { className: e["panel__details-btn"] }, ne()));
   }, ne = () => {
     const u = ce({
       label: s,
@@ -141,9 +141,9 @@ const S = ({ status: a, statusMessage: n }) => {
       ellipsis: !0,
       ...u
     };
-    return o ? /* @__PURE__ */ t.createElement(X, { testId: "expand", "aria-expanded": f, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, f ? d : c), /* @__PURE__ */ t.createElement(C, { svgIcon: f ? _e : pe })) : /* @__PURE__ */ t.createElement(X, { testId: "url", htmlMarkup: p, href: x, target: G, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, c), /* @__PURE__ */ t.createElement(C, { svgIcon: ue }));
+    return o ? /* @__PURE__ */ t.createElement(X, { testId: "expand", "aria-expanded": f, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, f ? d : c), /* @__PURE__ */ t.createElement(C, { svgIcon: f ? _e : pe })) : /* @__PURE__ */ t.createElement(X, { testId: "url", htmlMarkup: p, href: x, target: J, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, c), /* @__PURE__ */ t.createElement(C, { svgIcon: ue }));
   }, le = () => {
-    if (!o || !q && !f)
+    if (!o || !G && !f)
       return null;
     const u = r(e["panel-details"], {
       [e["panel-details--open"]]: f,
@@ -158,13 +158,13 @@ const S = ({ status: a, statusMessage: n }) => {
     }), b = r(e["title-container__title"], {
       [e["title-container__title--badge"]]: j
     });
-    return g && /* @__PURE__ */ t.createElement("div", { className: u }, /* @__PURE__ */ t.createElement(ye, { appearance: "title3", htmlMarkup: K, id: k, className: b }, g), j && /* @__PURE__ */ t.createElement("div", { className: e.panel__badge }, /* @__PURE__ */ t.createElement(ie, { color: "blueberry", testId: "badge-status" }, I)));
+    return g && /* @__PURE__ */ t.createElement("div", { className: u }, /* @__PURE__ */ t.createElement(ye, { appearance: "title3", htmlMarkup: P, id: k, className: b }, g), j && /* @__PURE__ */ t.createElement("div", { className: e.panel__badge }, /* @__PURE__ */ t.createElement(ie, { color: "blueberry", testId: "badge-status" }, I)));
   }, T = {
     contentA: M,
-    contentB: $,
+    contentB: z,
     contentHeader: F,
     ctaContainer: ae(),
-    icon: B,
+    icon: D,
     status: _,
     statusMessage: I,
     titleElement: re()
@@ -174,18 +174,18 @@ const S = ({ status: a, statusMessage: n }) => {
     {
       tabIndex: O ? -1 : void 0,
       ref: m,
-      "data-testid": J,
+      "data-testid": K,
       className: ee,
       "data-analyticsid": oe.Panel
     },
     /* @__PURE__ */ t.createElement("div", { className: te }, Y && /* @__PURE__ */ t.createElement(he, { ...T }), Z && /* @__PURE__ */ t.createElement(we, { ...T }), V && /* @__PURE__ */ t.createElement(Ie, { ...T, layout: v })),
     le()
   );
-}), Pe = ge;
+});
 export {
   Ce as PanelLayout,
   ve as PanelStatus,
   be as PanelVariant,
-  Pe as default
+  Oe as default
 };
 //# sourceMappingURL=Panel.js.map