@helsenorge/designsystem-react 10.5.0 → 10.6.1

package/components/ExpanderList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander-list {
   list-style: none;
@@ -131,7 +131,7 @@
   width: 100%;
   outline: none;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }

package/components/FormGroup/styles.module.scss

@@ -1,7 +1,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .form-group-wrapper {
   &__title {

package/components/HelpBubble/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .helpbubble {
   $bubble: &;
@@ -15,7 +15,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, lg)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }

package/components/HelpQuestion/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .helpquestion {
   display: inline-flex;
@@ -19,7 +19,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-xs;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     gap: spacers.getSpacer(2xs);
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-sm;

package/components/HighlightPanel/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
-@import '../../scss/supernova/styles/colors';
+@import '../../scss/supernova/styles/colors.css';
 
 @mixin content-wrapper-with-icon-flex {
   display: flex;

package/components/HorizontalScroll/styles.module.scss

@@ -1,6 +1,6 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 // Disables fordi stylelint og prettier er uenige
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */

package/components/Input/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/input' as input;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .input-wrapper {
   @include input.input-wrapper;
@@ -42,7 +42,7 @@
   &--with-icon {
     padding: 1px 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: 0.375rem 0;
     }
   }
@@ -60,7 +60,7 @@
       height: 2.5rem;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       height: 2.125rem;
 
       &--large {

package/components/Label/styles.module.scss

@@ -3,13 +3,13 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .label-wrapper {
   margin-bottom: spacers.getSpacer(2xs);
   line-height: font-settings.$lineheight-size-xs;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     line-height: font-settings.$lineheight-size-sm;
   }
 

package/components/LinkList/styles.module.scss

@@ -2,8 +2,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .link-list {
   list-style: none;
@@ -122,7 +122,7 @@
       line-height: font-settings.$lineheight-size-md;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       &--small {
         font-size: font-settings.$font-size-sm;
         line-height: font-settings.$lineheight-size-sm;

package/components/ListHeader/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .list-header {
   display: grid;

package/components/MaxCharacters/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .max-characters {
   display: flex;
@@ -12,7 +12,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     line-height: font-settings.$lineheight-size-md;
     font-size: font-settings.$font-size-md;
   }

package/components/Modal/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .modal-overlay {
   background: rgb(51 51 51 / 75%);
@@ -78,22 +78,22 @@
     width: calc(100vw - 0.75rem);
     padding-bottom: spacers.getSpacer(l);
 
-    @media (max-width: map.get($grid-breakpoints, sm)) {
+    @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       p {
         font-size: 1.125rem;
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-bottom: spacers.getSpacer(xl);
       width: 612px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       width: 696px;
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       padding-bottom: spacers.getSpacer(2xs);
     }
   }
@@ -102,11 +102,11 @@
     width: calc(100vw - 0.75rem);
     padding-bottom: spacers.getSpacer(m);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       width: 335px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       width: 515px;
     }
   }
@@ -118,7 +118,7 @@
   &--image {
     padding: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       max-height: calc(100vh - 24px);
       max-width: calc(100vw - 24px);
       width: 100%;
@@ -181,7 +181,7 @@
       max-height: none;
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       max-height: calc(100dvh - 4rem);
     }
 
@@ -193,11 +193,11 @@
       &--large {
         padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
         }
 
-        @include tiny-screens-media-query {
+        @include breakpoints.tiny-screens-media-query {
           padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
         }
       }
@@ -205,11 +205,11 @@
       &--medium {
         padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
         }
 
-        @include tiny-screens-media-query {
+        @include breakpoints.tiny-screens-media-query {
           padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
         }
       }
@@ -260,11 +260,11 @@
     &--large {
       padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
       }
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
@@ -272,7 +272,7 @@
     &--medium {
       padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }

package/components/NotificationPanel/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
 @use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .notification-panel {
   $panel: &;
@@ -13,7 +13,7 @@
   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)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-left: spacers.getSpacer(s);
     padding-right: spacers.getSpacer(m);
     #{$panel}__icon {
@@ -27,7 +27,7 @@
     line-height: 1.25rem;
     box-shadow: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(2xs);
       padding-right: spacers.getSpacer(s);
     }
@@ -45,15 +45,15 @@
   }
 
   &--small {
-    max-width: map.get($grid-breakpoints, sm);
+    max-width: map.get(breakpoints.$grid-breakpoints, sm);
   }
 
   &--medium {
-    max-width: map.get($grid-breakpoints, md);
+    max-width: map.get(breakpoints.$grid-breakpoints, md);
   }
 
   &--large {
-    max-width: map.get($grid-breakpoints, lg);
+    max-width: map.get(breakpoints.$grid-breakpoints, lg);
   }
 
   &--info {
@@ -133,7 +133,7 @@
     line-height: font-settings.$lineheight-size-xs;
     margin: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-sm;
       line-height: 1.625rem;
     }
@@ -173,7 +173,7 @@
     &--expander-no-label {
       margin: spacers.getSpacer(2xs) 0 0;
 
-      @media (max-width: map.get($grid-breakpoints, lg)) {
+      @media (max-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-top: 0;
       }
     }

package/components/Panel/styles.module.scss

@@ -2,12 +2,12 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 @mixin panel-padding {
   padding: spacers.getSpacer(s);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
   }
 }
@@ -15,7 +15,7 @@
 @mixin panel-padding-icon {
   padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
   }
 }
@@ -58,7 +58,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     gap: $layout-sm-gap $layout-sm-gap;
     width: 100%;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       column-gap: $layout-md-col-gap;
     }
   }
@@ -68,7 +68,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       grid-template-columns: auto 1fr;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       grid-template-rows: auto auto;
       grid-template-columns: 1fr auto;
 
@@ -87,7 +87,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       grid-template-columns: auto 1fr;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       grid-template-rows: auto auto;
       grid-template-columns: 1fr auto;
 
@@ -104,7 +104,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-template-columns: minmax(auto, 760px) auto;
 
       &--with-icon {
@@ -123,7 +123,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       row-gap: $layout-sm-gap;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-template-rows: auto;
 
       &--a {
@@ -171,13 +171,13 @@ $layout-md-col-gap: spacers.getSpacer(m);
 
     &--layout-1,
     &--layout-2 {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         grid-row: span 2;
         padding-right: spacers.getSpacer(2xs);
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-row: span 2;
       padding-right: spacers.getSpacer(2xs);
     }
@@ -185,7 +185,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     &--layout-3 {
       grid-row: span 2;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         grid-row: span 1;
       }
     }
@@ -203,7 +203,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     justify-content: flex-end;
 
     &--no-content-b {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         flex-direction: row;
         grid-column: span 2;
       }
@@ -217,7 +217,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
   &__details-btn {
     align-self: flex-start;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       align-self: flex-end;
       margin-left: auto;
     }
@@ -350,7 +350,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     }
   }
 
-  @media (max-width: map.get($grid-max-breakpoints, xs)) {
+  @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -409,7 +409,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
   display: flex;
   flex-direction: column;
 
-  @media (min-width: map.get($grid-breakpoints, lg)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
     padding-top: spacers.getSpacer(xs);
     flex-direction: row;
   }
@@ -419,7 +419,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     align-items: center;
     padding-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       padding-top: 0;
       padding-right: spacers.getSpacer(m);
       padding-bottom: 0;

package/components/PanelList/styles.module.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .panel-list {
   &__panel:not(:last-child) {
     margin-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin-bottom: spacers.getSpacer(s);
     }
   }

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":";;;;;;;;;;;;;;;;;AAqBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,SAAU,IAAA;AACVA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AAHJA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAMA,IAAA,yCAAAC,0BAAL;AACLA,wBAAA,OAAQ,IAAA;AACRA,wBAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,wBAAA,CAAA,CAAA;AAgCC,MAAA,UAAkC,CAAC,UAAwB;AAChE,QAAA,mBAAmB,OAA0B,IAAI;AACjD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AACpC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA;AAAA,EAAA,IAClB;AACJ,QAAM,gBAAgB,WAAW,OAAO,iBAAiB,GAAG;AAAA,IAC1D,CAAC,OAAO,oBAAoB,cAAc,EAAE,CAAC,GAAG;AAAA,EAAA,CACjD;AACD,QAAM,aAAa,cAAc;AAC3B,QAAA,SAAS,aAAa,YAAY;AAExC,kBAAgB,UAAU,MAAM;AAC9B,cAAU,KAAK;AAAA,EAAA,CAChB;AAED,QAAM,EAAE,WAAW,2BAA2B,SAAS,gBAAgB;AACvE,QAAM,iBAAiB,SAAS,SAAS,SAAS,SAAS;AAErD,QAAA,cAAc,CAAC,OAA0B;AAC7C,cAAU,KAAK;AACf,UAAM,GAAG;AAAA,EACX;AAEA,QAAM,iBAAiB,MAAM;AACvB,QAAA,YAA2B,UAAU,QAAQ,GAAG;AAEhD,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,WAAW,WAAW,OAAO,oBAAoB,GAAG,gBAAgB;AAAA,UACpE,gBAAgB,OAAO,0BAA0B;AAAA,UACjD,eAAe;AAAA,UACf;AAAA,UAEC,yBAAM,SAAS;AAAA,YAAI;AAAA,YAAU,CAAA,UAC5BC,eAAM,aAAa,OAAO;AAAA,cACxB,UAAUA,eAAM,SAAS;AAAA,gBAAI,MAAM,MAAM;AAAA,gBAAU,CAAAC,WACjD,YAAuBA,QAAO,SAAS,IAAI,IACvCD,eAAM,aAAaC,QAAO;AAAA,kBACxB,SAAS,CAAC,UACR,YAAY,MAAMA,OAAM,MAAM,WAAWA,OAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,gBAAA,CACtE,IACDA;AAAAA,cAAA;AAAA,YAEP,CAAA;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AAEM,QAAA,oBAAoB,CAAC,MAAwD;AACjF,SAAK,EAAE,gBAAgB;AACvB,cAAU,CAAC,MAAM;AAAA,EACnB;AAEM,QAAA,gBACJ,WAAW,OAAO,YAAY,WAC3B,oBAAA,UAAA,EAAS,UAAU,SAAS,MAAM,SAAS,QAAQ,WAAW,wBAAwB,IAEvF,WAAY,oBAAA,MAAA,EAAK,SAAkB,MAAM,SAAS,QAAQ,WAAW,uBAAwB,CAAA;AAGjG,QAAM,WAAW,UACf,gBAEA,oBAAC,QAAK,SAAS,WAAW,cAAc,OAAO,SAAS,OAAO,GAAG,MAAM,gBAAgB,WAAW,wBAAwB;AAG7H,QAAM,YAAY,oBAAC,MAAK,EAAA,SAAS,GAAG,OAAO,SAAS,OAAO,GAAG,MAAM,gBAAgB,WAAW,uBAAwB,CAAA;AAEvH,QAAM,gBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,SAAS,oBAAoB;AAAA,MAC1C,WAAW;AAAA,MACX,cAAY,SAAS,uBAAuB;AAAA,MAC5C,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,aAAa,qBAAqB,UAA8B,oBAAA,QAAA,EAAM,UAAU,WAAA;AAAA,4BAC/E,OAAI,EAAA,KAAK,SAAU,UAAA,SAAS,YAAY,UAAS;AAAA,QAClD,aAAa,qBAAqB,WAA8B,oBAAC,UAAM,UAAU,UAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpF;AAGF,SACG,qBAAA,OAAA,EAAI,KAAK,UAAU,WAAW,WAAW,OAAO,iBAAiB,GAAG,gBAAgB,GAAG,oBAAkB,YAAY,SACnH,UAAA;AAAA,IAAA;AAAA,IACA,UAAU,eAAe;AAAA,EAAA,GAC5B;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}

package/components/PopMenu/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .pop-menu-button {
   padding: 0;
@@ -111,19 +111,25 @@ html :focus > .pop-menu-button {
   border: 0.125rem solid rgb(24 128 151);
   box-shadow: 0 0 0.3125rem 0 rgb(0 0 0 / 50%);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     width: 26.125rem;
   }
 
   li:first-of-type {
-    a {
+    border-top: none;
+
+    a,
+    button {
       border-top-left-radius: 0.5625rem;
       border-top-right-radius: 0.5625rem;
     }
   }
 
   li:last-of-type {
-    a {
+    border-bottom: none;
+
+    a,
+    button {
       border-bottom-left-radius: 0.5625rem;
       border-bottom-right-radius: 0.5625rem;
     }

package/components/PopOver/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .popover {
   $popover: &;
@@ -22,7 +22,7 @@
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
 
-  @media (min-width: map.get($grid-breakpoints, lg)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }