@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Modal/index.js.map

@@ -1 +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 { 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 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    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\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\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 = 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 ? 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    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\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              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\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={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'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <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              </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","_a","cn"],"mappings":"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"}
+{"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 { 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 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    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\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  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 = 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  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=\"dialog\" 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 && <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              </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/components/Modal/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/palette';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .modal-overlay {
   background: rgb(51 51 51 / 75%);
@@ -32,25 +32,26 @@
 .modal {
   pointer-events: auto;
   box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
-  background-color: $white;
+  background-color: palette.$white;
   animation: open 200ms 1;
+  outline: none;
 
   &__title {
     &--error {
-      color: $cherry600;
+      color: palette.$cherry600;
     }
 
     &--success {
-      color: $kiwi900;
+      color: palette.$kiwi900;
     }
   }
 
   &__iconWrapper {
-    padding-right: getSpacer(xs);
+    padding-right: spacers.getSpacer(xs);
   }
 
   &__afterTitleChildren {
-    padding-left: getSpacer(xs);
+    padding-left: spacers.getSpacer(xs);
   }
 
   p {
@@ -58,24 +59,24 @@
   }
 
   &--normal {
-    background-color: $white;
+    background-color: palette.$white;
   }
 
   &--error {
-    background-color: $cherry100;
+    background-color: palette.$cherry100;
   }
 
   &--warning {
-    background-color: $banana50;
+    background-color: palette.$banana50;
   }
 
   &--success {
-    background-color: $kiwi50;
+    background-color: palette.$kiwi50;
   }
 
   &--large {
     width: calc(100vw - 0.75rem);
-    padding-bottom: getSpacer(l);
+    padding-bottom: spacers.getSpacer(l);
 
     @media (max-width: map.get($grid-breakpoints, sm)) {
       p {
@@ -84,7 +85,7 @@
     }
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-bottom: getSpacer(xl);
+      padding-bottom: spacers.getSpacer(xl);
       width: 612px;
     }
 
@@ -92,14 +93,14 @@
       width: 696px;
     }
 
-    @container (max-width: 319px) {
-      padding-bottom: getSpacer(2xs);
+    @include tiny-screens-media-query {
+      padding-bottom: spacers.getSpacer(2xs);
     }
   }
 
   &--medium {
     width: calc(100vw - 0.75rem);
-    padding-bottom: getSpacer(m);
+    padding-bottom: spacers.getSpacer(m);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       width: 335px;
@@ -159,8 +160,8 @@
 
     &__close {
       position: absolute;
-      right: getSpacer(3xs);
-      top: getSpacer(3xs);
+      right: spacers.getSpacer(3xs);
+      top: spacers.getSpacer(3xs);
     }
   }
 
@@ -170,12 +171,17 @@
     overflow: auto;
     overflow-x: hidden;
 
+    &:focus-visible {
+      outline: 1px solid palette.$black;
+      outline-offset: -1px;
+    }
+
     @media print {
       overflow: hidden;
       max-height: none;
     }
 
-    @container (max-width: 319px) {
+    @include tiny-screens-media-query {
       max-height: calc(100dvh - 4rem);
     }
 
@@ -185,30 +191,30 @@
 
     &__scroll {
       &--large {
-        padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
+        padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
+          padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
         }
 
-        @container (max-width: 319px) {
-          padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
+        @include tiny-screens-media-query {
+          padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
         }
       }
 
       &--medium {
-        padding: getSpacer(l) getSpacer(m) getSpacer(2xs);
+        padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
         @media (min-width: map.get($grid-breakpoints, md)) {
-          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
+          padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
         }
 
-        @container (max-width: 319px) {
-          padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+        @include tiny-screens-media-query {
+          padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
         }
       }
       &--large#{&}--image {
-        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
+        padding: spacers.getSpacer(xl) spacers.getSpacer(2xs) spacers.getSpacer(l);
       }
     }
 
@@ -234,8 +240,8 @@
     }
 
     &__imageDescription {
-      font-size: $font-size-xs;
-      padding-top: getSpacer(s);
+      font-size: font-settings.$font-size-xs;
+      padding-top: spacers.getSpacer(s);
       display: block;
     }
   }
@@ -252,22 +258,22 @@
     }
 
     &--large {
-      padding: getSpacer(l) getSpacer(m) 0;
+      padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(l) getSpacer(xl) 0;
+        padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
       }
 
-      @container (max-width: 319px) {
-        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      @include tiny-screens-media-query {
+        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
 
     &--medium {
-      padding: getSpacer(m) getSpacer(m) 0;
+      padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
 
-      @container (max-width: 319px) {
-        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      @include tiny-screens-media-query {
+        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
   }

package/components/NotificationPanel/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
 import { useUuid } from "../../hooks/useUuid.js";
@@ -16,7 +16,7 @@ const FluidWrapper = ({ fluid, children }) => {
   }
   return children;
 };
-const NotificationPanel = React.forwardRef((props, ref) => {
+const NotificationPanel = React__default.forwardRef((props, ref) => {
   const {
     children,
     variant = "info",
@@ -51,7 +51,7 @@ const NotificationPanel = React.forwardRef((props, ref) => {
       [styles["notification-panel__children--outline"]]: outlineVariant
     });
     const CustomTag = labelHtmlMarkup;
-    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);
+    const [expanderOpen, setExpanderOpen] = React__default.useState(expanderOpenFromStart);
     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 }),

package/components/NotificationPanel/index.js.map

@@ -1 +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 { 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' | '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 === '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 ? 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":[],"mappings":"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"}
+{"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 { 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' | '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 === '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 ? 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":["React"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -1,35 +1,35 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
-@import '../AnchorLink/styles.module';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../AnchorLink/styles.module' as anchorlink;
+@use '../../scss/breakpoints' as *;
 
 .notification-panel {
   $panel: &;
 
   display: flex;
-  padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(2xs);
+  padding: spacers.getSpacer(2xs) spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(2xs);
   box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
   border-radius: 0.25rem;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding-left: getSpacer(s);
-    padding-right: getSpacer(m);
+    padding-left: spacers.getSpacer(s);
+    padding-right: spacers.getSpacer(m);
     #{$panel}__icon {
-      margin-right: getSpacer(m);
+      margin-right: spacers.getSpacer(m);
     }
   }
 
   &--compact {
     width: fit-content;
-    font-size: $font-size-xs;
+    font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
     box-shadow: none;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-left: getSpacer(2xs);
-      padding-right: getSpacer(s);
+      padding-left: spacers.getSpacer(2xs);
+      padding-right: spacers.getSpacer(s);
     }
 
     &--outline {
@@ -37,11 +37,11 @@
     }
   }
   #{$panel}__icon {
-    margin-right: getSpacer(2xs);
+    margin-right: spacers.getSpacer(2xs);
   }
 
   &--dismissable {
-    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(m);
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(m);
   }
 
   &--small {
@@ -57,8 +57,8 @@
   }
 
   &--info {
-    border: 0.125rem solid $blueberry700;
-    background-color: $blueberry50;
+    border: 0.125rem solid palette.$blueberry700;
+    background-color: palette.$blueberry50;
   }
 
   &--info#{&}--compact {
@@ -71,8 +71,8 @@
   }
 
   &--warn {
-    border: 0.125rem solid $banana700;
-    background-color: $banana50;
+    border: 0.125rem solid palette.$banana700;
+    background-color: palette.$banana50;
   }
 
   &--warn#{&}--compact {
@@ -85,8 +85,8 @@
   }
 
   &--error {
-    border: 0.125rem solid $cherry700;
-    background-color: $cherry50;
+    border: 0.125rem solid palette.$cherry700;
+    background-color: palette.$cherry50;
   }
 
   &--error#{&}--compact {
@@ -99,8 +99,8 @@
   }
 
   &--success {
-    border: 0.125rem solid $kiwi900;
-    background-color: $kiwi50;
+    border: 0.125rem solid palette.$kiwi900;
+    background-color: palette.$kiwi50;
   }
 
   &--success#{&}--compact {
@@ -115,36 +115,36 @@
   &__close {
     order: 1;
     margin-left: auto;
-    padding-left: getSpacer(2xs);
+    padding-left: spacers.getSpacer(2xs);
   }
 
   &__content {
     align-self: center;
 
     a {
-      @include anchorlink;
-      @include anchorlink-icon;
+      @include anchorlink.anchorlink;
+      @include anchorlink.anchorlink-icon;
     }
   }
 
   &__label,
   &__children {
-    font-size: $font-size-xs;
-    line-height: $lineheight-size-xs;
+    font-size: font-settings.$font-size-xs;
+    line-height: font-settings.$lineheight-size-xs;
     margin: 0;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-sm;
+      font-size: font-settings.$font-size-sm;
       line-height: 1.625rem;
     }
   }
 
   &__label {
     font-weight: 700;
-    margin: getSpacer(2xs) 0 0;
+    margin: spacers.getSpacer(2xs) 0 0;
 
     &--compact {
-      font-size: $font-size-xs;
+      font-size: font-settings.$font-size-xs;
       line-height: 1.25rem;
     }
 
@@ -164,14 +164,14 @@
 
   &__children {
     font-weight: 600;
-    padding: getSpacer(3xs) 0;
+    padding: spacers.getSpacer(3xs) 0;
 
     &--with-label {
       font-weight: 500;
     }
 
     &--expander-no-label {
-      margin: getSpacer(2xs) 0 0;
+      margin: spacers.getSpacer(2xs) 0 0;
 
       @media (max-width: map.get($grid-breakpoints, lg)) {
         padding-top: 0;
@@ -188,7 +188,7 @@
   }
 
   &--with-content {
-    padding-bottom: getSpacer(xs);
+    padding-bottom: spacers.getSpacer(xs);
   }
 }