@helsenorge/designsystem-react 10.6.1 → 10.6.3

package/components/PopOver/styles.module.scss

@@ -1,8 +1,9 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .popover {
   $popover: &;
@@ -13,18 +14,18 @@
   max-width: 23.3125rem;
   text-align: start;
   font-family: inherit;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
-  background-color: palette.$white;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  background-color: $white;
   z-index: 3;
   visibility: hidden;
-  border: spacers.getSpacer(4xs) solid palette.$plum600;
+  border: getSpacer(4xs) solid $plum600;
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+  @media (min-width: map.get($grid-breakpoints, lg)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &--visible {
@@ -32,7 +33,7 @@
   }
 
   &__arrow {
-    --drop-shadow-color: #{palette.$plum600};
+    --drop-shadow-color: #{$plum600};
 
     width: 0;
     height: 0;
@@ -44,14 +45,14 @@
 
     &--over {
       border-width: 0.625rem;
-      border-bottom-color: palette.$white;
+      border-bottom-color: $white;
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
     }
 
     &--under {
       border-width: 0.625rem;
-      border-top-color: palette.$white;
+      border-top-color: $white;
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }

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

@@ -1,4 +1,7 @@
 export type Styles = {
+  anchorlink: string;
+  anchorlink__icon: string;
+  'anchorlink-wrapper': string;
   popover: string;
   popover__arrow: string;
   'popover__arrow--over': string;

package/components/Progressbar/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../scss/palette' as palette;
-@use '../../scss/screen-reader' as *;
+@import '../../scss/palette';
+@import '../../scss/screen-reader';
 
 .progressbar {
   &__svg {
@@ -20,7 +20,7 @@
   }
 
   &--overlay-screen {
-    background: palette.$transparent-grey;
+    background: $transparent-grey;
     position: fixed;
     inset: 0;
   }
@@ -29,7 +29,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: palette.$transparent-grey;
+    background: $transparent-grey;
     height: 100%;
     width: 100%;
   }

package/components/PromoPanel/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 $colors: 'neutral', 'blueberry', 'cherry';
 
@@ -11,42 +11,42 @@ $colors: 'neutral', 'blueberry', 'cherry';
   display: flex;
   align-items: center;
   border-radius: 8px;
-  padding-left: spacers.getSpacer(s);
-  padding-right: spacers.getSpacer(2xs);
+  padding-left: getSpacer(s);
+  padding-right: getSpacer(2xs);
   transition: background-color 0.15s ease-in-out;
 
   &:focus-within {
     box-shadow:
-      0 0 0 2px palette.$black,
-      inset 0 0 0 2px palette.$black;
+      0 0 0 2px $black,
+      inset 0 0 0 2px $black;
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+  @media (min-width: map.get($grid-breakpoints, xs)) {
     padding-left: 0;
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-    padding-right: spacers.getSpacer(s);
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    padding-right: getSpacer(s);
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding-right: spacers.getSpacer(l);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding-right: getSpacer(l);
   }
 
   &--no-illustration {
-    padding-left: spacers.getSpacer(s);
+    padding-left: getSpacer(s);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding-left: spacers.getSpacer(l);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: getSpacer(l);
     }
   }
 
   @each $color in $colors {
     &--#{$color} {
-      background-color: map.get(palette.$palette-map, #{$color}50);
+      background-color: map.get($palette-map, #{$color}50);
 
       &:hover {
-        background-color: map.get(palette.$palette-map, #{$color}100);
+        background-color: map.get($palette-map, #{$color}100);
       }
     }
   }
@@ -54,7 +54,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__illustration {
     display: none;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+    @media (min-width: map.get($grid-breakpoints, xs)) {
       display: inline;
     }
   }
@@ -63,14 +63,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: spacers.getSpacer(3xs);
-    padding-top: spacers.getSpacer(m);
-    padding-bottom: spacers.getSpacer(m);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      gap: spacers.getSpacer(2xs);
-      padding-top: spacers.getSpacer(l);
-      padding-bottom: spacers.getSpacer(l);
+    gap: getSpacer(3xs);
+    padding-top: getSpacer(m);
+    padding-bottom: getSpacer(m);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      gap: getSpacer(2xs);
+      padding-top: getSpacer(l);
+      padding-bottom: getSpacer(l);
     }
 
     a,
@@ -87,14 +87,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
   }
 
   &__icon {
-    margin-left: spacers.getSpacer(xs);
+    margin-left: getSpacer(xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      margin-left: spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      margin-left: spacers.getSpacer(l);
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      margin-left: getSpacer(l);
     }
   }
 }

package/components/RadioButton/styles.module.scss

@@ -1,24 +1,24 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 @mixin dashed-border() {
   box-shadow: none;
 
-  $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+  $encoded-color: string.slice(meta.inspect($neutral600), 2);
 
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23" + $encoded-color + "' stroke-width='4' stroke-dasharray='0.5, 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 100px;
 }
 
 .radio-button-errors {
-  font-size: font-settings.$font-size-sm;
+  font-size: $font-size-sm;
   font-weight: 600;
-  color: palette.$cherry600;
+  color: $cherry600;
   margin-top: 0;
 }
 
@@ -26,21 +26,21 @@
   cursor: pointer;
 
   &__large {
-    margin: spacers.getSpacer(2xs) 0;
+    margin: getSpacer(2xs) 0;
 
     &--focused {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$neutral500;
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $neutral500;
     }
     &--focused#{&}--on-blueberry {
-      color: palette.$blueberry500;
+      color: $blueberry500;
     }
 
     &--focused#{&}--selected {
-      color: palette.$blueberry900;
+      color: $blueberry900;
     }
     &--focused#{&}--invalid {
-      color: palette.$cherry400;
+      color: $cherry400;
     }
   }
 }
@@ -49,123 +49,123 @@
   display: flex;
   align-items: flex-start;
   cursor: pointer;
-  line-height: font-settings.$lineheight-size-sm;
-  color: palette.$black;
+  line-height: $lineheight-size-sm;
+  color: $black;
 
   &--on-dark {
-    color: palette.$white;
+    color: $white;
   }
 
   &--invalid {
-    color: palette.$black;
+    color: $black;
   }
 
   &--disabled {
     cursor: default;
-    color: palette.$neutral700;
+    color: $neutral700;
   }
 
   &__large {
-    padding: spacers.getSpacer(s);
-    background-color: palette.$neutral50;
+    padding: getSpacer(s);
+    background-color: $neutral50;
 
     &:hover {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
     }
 
     &--on-blueberry {
-      background-color: palette.$white;
+      background-color: $white;
 
       &:focus {
-        background-color: palette.$white;
+        background-color: $white;
       }
 
       &:hover {
-        background-color: palette.$blueberry100;
+        background-color: $blueberry100;
       }
     }
 
     &--on-grey {
-      background-color: palette.$white;
+      background-color: $white;
 
       &:hover {
-        background-color: palette.$neutral100;
+        background-color: $neutral100;
       }
 
       &:focus {
-        background-color: palette.$white;
+        background-color: $white;
       }
     }
   }
 
   &__large#{&}--on-dark {
-    background-color: palette.$blueberry800;
+    background-color: $blueberry800;
   }
   &__large#{&}--invalid {
-    background-color: palette.$white;
+    background-color: $white;
 
     &:hover {
-      background-color: palette.$cherry100;
+      background-color: $cherry100;
     }
   }
   &__large#{&}__large--selected-invalid {
-    background-color: palette.$cherry100;
-    color: palette.$black;
+    background-color: $cherry100;
+    color: $black;
 
     &:hover {
-      background-color: palette.$cherry200;
+      background-color: $cherry200;
     }
   }
 
   &__large#{&}__large--on-grey {
-    background-color: palette.$white;
+    background-color: $white;
 
     &:hover {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
     }
 
     &:focus {
-      background-color: palette.$white;
+      background-color: $white;
     }
   }
 
   &__large#{&}__large--on-blueberry {
-    background-color: palette.$white;
+    background-color: $white;
 
     &:hover {
-      background-color: palette.$blueberry100;
+      background-color: $blueberry100;
     }
 
     &:focus {
-      background-color: palette.$white;
+      background-color: $white;
     }
   }
 
   &__large--selected {
-    background-color: palette.$blueberry500;
-    color: palette.$white;
+    background-color: $blueberry500;
+    color: $white;
 
     &:hover {
-      background-color: palette.$blueberry600;
+      background-color: $blueberry600;
     }
   }
 
   &__large#{&}__large--disabled {
-    color: palette.$neutral700;
-    background-color: palette.$neutral50;
+    color: $neutral700;
+    background-color: $neutral50;
 
     &:hover {
-      background-color: palette.$neutral50;
+      background-color: $neutral50;
     }
 
     &:focus {
-      background-color: palette.$neutral50;
+      background-color: $neutral50;
     }
   }
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     &__large {
-      padding: 1.68rem spacers.getSpacer(l);
+      padding: 1.68rem getSpacer(l);
     }
   }
 }
@@ -177,102 +177,102 @@
   justify-content: center;
   align-items: center;
   border-radius: 10rem;
-  margin: 0 spacers.getSpacer(s) 0 0;
+  margin: 0 getSpacer(s) 0 0;
   height: 1.5rem;
   width: 1.5rem;
   min-height: 1.5rem;
   min-width: 1.5rem;
-  color: palette.$neutral700;
-  box-shadow: 0 0 0 spacers.getSpacer(4xs);
+  color: $neutral700;
+  box-shadow: 0 0 0 getSpacer(4xs);
   outline: none;
 
   &:focus {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
+    box-shadow: 0 0 0 getSpacer(3xs);
+    color: $black;
   }
 
   &:hover {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    background-color: palette.$neutral100;
+    box-shadow: 0 0 0 getSpacer(3xs);
+    background-color: $neutral100;
   }
 
   :active > & {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
+    box-shadow: 0 0 0 getSpacer(3xs);
+    color: $black;
   }
 
   &:checked {
-    color: palette.$blueberry500;
+    color: $blueberry500;
 
     &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: palette.$blueberry50;
+      box-shadow: 0 0 0 getSpacer(4xs);
+      background-color: $blueberry50;
     }
 
     &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $black;
     }
   }
 
   &--on-blueberry {
-    color: palette.$blueberry500;
+    color: $blueberry500;
 
     :hover > & {
-      background-color: palette.$blueberry100;
+      background-color: $blueberry100;
     }
   }
 
   &--on-dark {
-    color: palette.$neutral200;
+    color: $neutral200;
 
     &:hover {
-      background-color: palette.$inverted-hover-old;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      background-color: $inverted-hover-old;
+      box-shadow: 0 0 0 getSpacer(3xs);
     }
 
     &:focus {
-      color: palette.$white;
+      color: $white;
     }
 
     :active > & {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $white;
     }
 
     &:checked {
-      color: palette.$blueberry200;
+      color: $blueberry200;
 
       &:hover {
-        background-color: palette.$inverted-hover-old;
+        background-color: $inverted-hover-old;
       }
 
       &:focus {
-        color: palette.$white;
+        color: $white;
       }
     }
   }
 
   &--invalid {
-    color: palette.$cherry600;
+    color: $cherry600;
 
     &:hover {
-      background-color: palette.$cherry100;
+      background-color: $cherry100;
     }
 
     &:active {
-      color: palette.$black;
+      color: $black;
     }
 
     &:focus {
-      color: palette.$black;
+      color: $black;
     }
 
     &:checked {
-      color: palette.$cherry600;
+      color: $cherry600;
 
       &:hover {
-        background-color: palette.$cherry100;
+        background-color: $cherry100;
       }
     }
   }
@@ -294,15 +294,15 @@
     }
 
     &:active {
-      color: palette.$neutral600;
+      color: $neutral600;
     }
 
     &:checked {
-      color: palette.$neutral600;
+      color: $neutral600;
 
       &:hover {
-        box-shadow: 0 0 0 spacers.getSpacer(4xs);
-        background-color: palette.$neutral50;
+        box-shadow: 0 0 0 getSpacer(4xs);
+        background-color: $neutral50;
       }
     }
   }
@@ -311,7 +311,7 @@
   &:checked::before {
     content: '';
     display: flex;
-    background-color: palette.$blueberry500;
+    background-color: $blueberry500;
     width: 0.875rem;
     height: 0.875rem;
     border-radius: 10rem;
@@ -324,11 +324,11 @@
   }
 
   &--on-dark:checked::before {
-    background-color: palette.$blueberry200;
+    background-color: $blueberry200;
   }
 
   &--invalid:checked::before {
-    background-color: palette.$cherry600;
+    background-color: $cherry600;
   }
 
   &--disabled:checked::before {
@@ -338,43 +338,43 @@
   &__large {
     &:checked {
       outline: none;
-      color: palette.$blueberry100;
+      color: $blueberry100;
     }
 
     &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      box-shadow: 0 0 0 getSpacer(3xs);
     }
 
     &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $black;
     }
 
     &:focus:checked {
-      color: palette.$white;
+      color: $white;
     }
 
     &:checked::before {
-      background-color: palette.$blueberry100;
+      background-color: $blueberry100;
     }
 
     &:checked:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
+      box-shadow: 0 0 0 getSpacer(4xs);
       background-color: unset;
     }
 
     &:checked:hover:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $white;
     }
 
     &--invalid {
       &:checked {
-        color: palette.$cherry500;
+        color: $cherry500;
       }
 
       &:checked::before {
-        background-color: palette.$cherry500;
+        background-color: $cherry500;
       }
 
       &:checked:hover {
@@ -382,11 +382,11 @@
       }
 
       &:checked:focus {
-        color: palette.$black;
+        color: $black;
       }
 
       &:checked:focus:hover {
-        color: palette.$black;
+        color: $black;
       }
     }
 
@@ -398,7 +398,7 @@
       }
 
       &:checked::before {
-        background-color: palette.$neutral600;
+        background-color: $neutral600;
       }
     }
   }