@helsenorge/designsystem-react 10.6.1 → 10.6.2

package/components/Panel/styles.module.scss

@@ -1,22 +1,22 @@
 @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';
 
 @mixin panel-padding {
-  padding: spacers.getSpacer(s);
+  padding: getSpacer(s);
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
   }
 }
 
 @mixin panel-padding-icon {
-  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
+  padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding: getSpacer(m) getSpacer(m) getSpacer(l);
   }
 }
 
@@ -30,8 +30,8 @@
   }
 }
 
-$layout-sm-gap: spacers.getSpacer(s);
-$layout-md-col-gap: spacers.getSpacer(m);
+$layout-sm-gap: getSpacer(s);
+$layout-md-col-gap: getSpacer(m);
 
 .panel-wrapper {
   width: 100%;
@@ -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(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($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(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($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(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($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(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($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(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       grid-template-rows: auto;
 
       &--a {
@@ -171,21 +171,21 @@ $layout-md-col-gap: spacers.getSpacer(m);
 
     &--layout-1,
     &--layout-2 {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      @media (min-width: map.get($grid-breakpoints, md)) {
         grid-row: span 2;
-        padding-right: spacers.getSpacer(2xs);
+        padding-right: getSpacer(2xs);
       }
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       grid-row: span 2;
-      padding-right: spacers.getSpacer(2xs);
+      padding-right: getSpacer(2xs);
     }
 
     &--layout-3 {
       grid-row: span 2;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      @media (min-width: map.get($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(breakpoints.$grid-breakpoints, lg)) {
+      @media (min-width: map.get($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(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       align-self: flex-end;
       margin-left: auto;
     }
@@ -234,63 +234,63 @@ $layout-md-col-gap: spacers.getSpacer(m);
   }
 
   &--fill {
-    background-color: palette.$neutral50;
+    background-color: $neutral50;
   }
 
   &--fill#{&}--selected {
-    background-color: palette.$neutral100;
+    background-color: $neutral100;
   }
 
   &--fill#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: palette.$neutral200;
+      background-color: $neutral200;
     }
   }
 
   &--white {
-    background-color: palette.$white;
+    background-color: $white;
   }
 
   &--fill#{&}--clickable,
   &--white#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral100, palette.$neutral600);
+    @include hover-and-focus-effects($neutral100, $neutral600);
   }
 
   &--white#{&}--selected {
-    box-shadow: inset 0 0 0 6px palette.$neutral100;
+    box-shadow: inset 0 0 0 6px $neutral100;
   }
 
   &--stroke {
-    border: 6px solid palette.$neutral100;
+    border: 6px solid $neutral100;
   }
 
   &--stroke#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral100);
+    @include hover-and-focus-effects($neutral50, $neutral100);
 
     &:focus {
-      border-color: palette.$neutral600;
+      border-color: $neutral600;
     }
   }
 
   &--line {
-    background-color: palette.$white;
-    border-color: palette.$neutral500;
+    background-color: $white;
+    border-color: $neutral500;
     border-top: 1px solid;
     border-bottom: 1px solid;
   }
 
   &--line#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral600);
+    @include hover-and-focus-effects($neutral50, $neutral600);
   }
 
   &--line#{&}--selected {
-    background-color: palette.$neutral50;
+    background-color: $neutral50;
     border-bottom: 0;
   }
 
   &--line#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
     }
   }
 
@@ -316,26 +316,26 @@ $layout-md-col-gap: spacers.getSpacer(m);
 
   &--new {
     &::before {
-      border-left-color: palette.$blueberry600;
+      border-left-color: $blueberry600;
     }
   }
 
   &--draft {
     &::before {
       border-left-style: dashed;
-      border-left-color: palette.$neutral500;
+      border-left-color: $neutral500;
     }
   }
 
   &--error {
     &::before {
-      border-left-color: palette.$cherry500;
+      border-left-color: $cherry500;
     }
   }
 }
 
 .title-container {
-  padding-bottom: spacers.getSpacer(s);
+  padding-bottom: getSpacer(s);
 
   &--no-content-a {
     padding-bottom: 0;
@@ -346,11 +346,11 @@ $layout-md-col-gap: spacers.getSpacer(m);
     display: inline;
 
     &--badge {
-      padding-right: spacers.getSpacer(2xs);
+      padding-right: getSpacer(2xs);
     }
   }
 
-  @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
+  @media (max-width: map.get($grid-max-breakpoints, xs)) {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -358,7 +358,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
 }
 
 .panel-details {
-  background-color: palette.$neutral50;
+  background-color: $neutral50;
   display: none;
 
   @include panel-padding;
@@ -374,30 +374,30 @@ $layout-md-col-gap: spacers.getSpacer(m);
   }
 
   &--line {
-    background: palette.$white;
-    border-bottom: 1px solid palette.$neutral500;
+    background: $white;
+    border-bottom: 1px solid $neutral500;
   }
 
   &--white {
-    background: palette.$white;
+    background: $white;
   }
 }
 
 .status-message {
-  font-size: font-settings.$font-size-sm;
-  color: palette.$cherry500;
+  font-size: $font-size-sm;
+  color: $cherry500;
   display: flex;
-  margin-bottom: spacers.getSpacer(2xs) * -1;
+  margin-bottom: getSpacer(2xs) * -1;
   grid-column: 1 / -1;
 
   span {
     padding-left: 5px;
     align-self: center;
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
   }
 
   &--new {
-    color: palette.$blueberry800;
+    color: $blueberry800;
   }
 }
 
@@ -409,25 +409,25 @@ $layout-md-col-gap: spacers.getSpacer(m);
   display: flex;
   flex-direction: column;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-    padding-top: spacers.getSpacer(xs);
+  @media (min-width: map.get($grid-breakpoints, lg)) {
+    padding-top: getSpacer(xs);
     flex-direction: row;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    padding-bottom: spacers.getSpacer(2xs);
+    padding-bottom: getSpacer(2xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-top: 0;
-      padding-right: spacers.getSpacer(m);
+      padding-right: getSpacer(m);
       padding-bottom: 0;
     }
 
     span {
-      padding-left: spacers.getSpacer(2xs);
-      font-size: font-settings.$font-size-sm;
+      padding-left: getSpacer(2xs);
+      font-size: $font-size-sm;
     }
   }
 }

package/components/PanelList/styles.module.scss

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

package/components/PopMenu/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
 
 .pop-menu-button {
   padding: 0;
@@ -14,7 +14,7 @@
   min-width: 3rem;
 
   &:focus {
-    border: 0.1875rem solid palette.$black;
+    border: 0.1875rem solid $black;
     box-shadow: none;
     outline: none;
   }
@@ -40,12 +40,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: palette.$neutral50;
+    background-color: $neutral50;
     border: none;
   }
 
   &:hover {
-    background-color: palette.$neutral50;
+    background-color: $neutral50;
   }
 
   &:active:hover {
@@ -53,8 +53,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: palette.$neutral50;
-    border: 0.1875rem solid palette.$black;
+    background-color: $neutral50;
+    border: 0.1875rem solid $black;
   }
 }
 
@@ -64,12 +64,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: palette.$neutral100;
+    background-color: $neutral100;
     border: none;
   }
 
   &:hover {
-    background-color: palette.$neutral100;
+    background-color: $neutral100;
   }
 
   &:active:hover {
@@ -77,8 +77,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: palette.$neutral100;
-    border: 0.1875rem solid palette.$black;
+    background-color: $neutral100;
+    border: 0.1875rem solid $black;
   }
 }
 
@@ -88,12 +88,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: palette.$blueberry100;
+    background-color: $blueberry100;
     border: none;
   }
 
   &:hover {
-    background-color: palette.$blueberry100;
+    background-color: $blueberry100;
   }
 
   &:active:hover {
@@ -101,8 +101,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: palette.$blueberry100;
-    border: 0.1875rem solid palette.$black;
+    background-color: $blueberry100;
+    border: 0.1875rem solid $black;
   }
 }
 
@@ -111,7 +111,7 @@ 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(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     width: 26.125rem;
   }
 

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);
     }
   }
 }