@helsenorge/designsystem-react 10.6.0 → 10.6.2

package/components/ExpanderHierarchy/expander.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/spacers' as spacers;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/font-mixins';
 
 .expander {
   $item: &;
 
   &:first-of-type {
-    border-top: 1px solid palette.$neutral500;
+    border-top: 1px solid $neutral500;
   }
 
   &__button {
@@ -20,41 +20,41 @@
     width: 100%;
     cursor: pointer;
     background-color: transparent;
-    border-bottom: 1px solid palette.$neutral500;
-    padding: spacers.getSpacer(xs) 0;
+    border-bottom: 1px solid $neutral500;
+    padding: getSpacer(xs) 0;
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       flex-direction: row-reverse;
       justify-content: start;
-      padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
+      padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(2xs);
     }
 
     &:hover,
     &:focus {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
     }
 
     &:focus {
       text-decoration: underline;
-      outline: spacers.getSpacer(4xs) solid palette.$black;
+      outline: getSpacer(4xs) solid $black;
     }
 
     &[aria-expanded='true'] {
-      background-color: palette.$neutral100;
+      background-color: $neutral100;
       border-bottom: none;
     }
 
     @media print {
       &--print {
-        background-color: palette.$neutral100;
+        background-color: $neutral100;
       }
     }
 
     &--2-and-lower {
-      padding: spacers.getSpacer(2xs) 0;
+      padding: getSpacer(2xs) 0;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(2xs);
+        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(2xs);
       }
     }
   }
@@ -63,19 +63,19 @@
     margin: 0;
 
     &--1 {
-      @include fonts.title2;
+      @include title2;
     }
 
     &--2 {
-      @include fonts.title3;
+      @include title3;
     }
 
     &--3 {
-      @include fonts.title4;
+      @include title4;
     }
 
     &--4-and-lower {
-      @include fonts.title5;
+      @include title5;
     }
 
     &--expanded {
@@ -95,44 +95,44 @@
 
   &__content {
     display: none;
-    border-bottom: 1px solid palette.$neutral500;
-    padding-top: spacers.getSpacer(m);
-    padding-left: spacers.getSpacer(2xs);
-    padding-bottom: spacers.getSpacer(m);
+    border-bottom: 1px solid $neutral500;
+    padding-top: getSpacer(m);
+    padding-left: getSpacer(2xs);
+    padding-bottom: getSpacer(m);
 
     &--1 {
-      padding-top: spacers.getSpacer(xl);
+      padding-top: getSpacer(xl);
     }
 
     &--1,
     &--2 {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: spacers.getSpacer(2xl);
+        padding-left: getSpacer(2xl);
       }
     }
 
     &--3-and-lower {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: spacers.getSpacer(xl);
+        padding-left: getSpacer(xl);
       }
     }
   }
 
   &__icon {
-    margin-left: spacers.getSpacer(s);
+    margin-left: getSpacer(s);
 
     &--2-and-lower {
-      margin-left: spacers.getSpacer(xs);
+      margin-left: getSpacer(xs);
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       margin-left: 0;
-      margin-right: spacers.getSpacer(s);
+      margin-right: getSpacer(s);
     }
 
     &--3-and-lower {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        margin-right: spacers.getSpacer(xs);
+        margin-right: getSpacer(xs);
       }
     }
   }

package/components/ExpanderHierarchy/styles.module.scss

@@ -1,5 +1,6 @@
-@use '../../scss/palette' as palette;
-@use '../../scss/spacers' as spacers;
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/font-mixins';
 
 .expanderhierarchy {
   list-style: none;
@@ -7,10 +8,10 @@
   margin: 0;
 
   &--2 {
-    margin-top: spacers.getSpacer(xl);
+    margin-top: getSpacer(xl);
   }
 
   &--3-and-lower {
-    margin-top: spacers.getSpacer(m);
+    margin-top: getSpacer(m);
   }
 }

package/components/ExpanderList/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
 @import '../../scss/supernova/styles/colors';
 
 .expander-list {
@@ -46,42 +46,42 @@
       background-color: var(--color-base-background-white);
 
       &--white {
-        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -117,8 +117,8 @@
 .expander-list-link {
   padding: 0;
   position: relative;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
   display: flex;
   cursor: pointer;
   font-family: inherit;
@@ -132,8 +132,8 @@
   outline: none;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &--open {
@@ -142,7 +142,7 @@
 
   &--fill,
   &--fill-negative {
-    margin-top: spacers.getSpacer(s);
+    margin-top: getSpacer(s);
   }
 
   &--fill-negative {
@@ -150,7 +150,7 @@
   }
 
   &--closed#{&}--fill {
-    margin-bottom: spacers.getSpacer(s);
+    margin-bottom: getSpacer(s);
   }
 
   &:focus-visible:not(.expander-list-link--outline) {
@@ -237,21 +237,21 @@
   }
 
   &--large {
-    font-size: font-settings.$font-size-lg;
-    line-height: font-settings.$lineheight-size-lg;
+    font-size: $font-size-lg;
+    line-height: $lineheight-size-lg;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    margin-right: spacers.getSpacer(2xs);
+    margin-right: getSpacer(2xs);
   }
 
   &__chevron {
     display: flex;
     align-items: center;
     margin-left: auto;
-    padding-left: spacers.getSpacer(2xs);
+    padding-left: getSpacer(2xs);
   }
 
   &__main-content {
@@ -267,7 +267,7 @@
     }
 
     &--padding {
-      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l);
+      padding: getSpacer(xs) getSpacer(s) getSpacer(l);
     }
   }
 }

package/components/EyebrowHeader/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../scss/spacers';
+
 .subtitle {
   margin: 0;
 }

package/components/FormGroup/styles.module.scss

@@ -1,12 +1,12 @@
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-mixins';
 
 .form-group-wrapper {
   &__title {
     &--on-dark {
-      color: palette.$white;
+      color: $white;
     }
   }
 }
@@ -21,20 +21,20 @@
   margin: 0;
   display: flex;
   flex-flow: column;
-  gap: spacers.getSpacer(s);
+  gap: getSpacer(s);
 
   > div {
     padding-bottom: 0;
   }
 
   &__legend {
-    margin-bottom: spacers.getSpacer(m);
+    margin-bottom: getSpacer(m);
     margin-top: 0;
 
-    @include fonts.legend;
+    @include legend;
 
     &--on-dark {
-      color: palette.$white;
+      color: $white;
     }
   }
 }

package/components/FormLayout/styles.module.scss

@@ -1,15 +1,16 @@
-@use '../../scss/spacers' as spacers;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .form-layout-container {
-  // Settes med harde verdier fordi calc() lenger nede ikke støtter spacers.getSpacer()
+  // Settes med harde verdier fordi calc() lenger nede ikke støtter getSpacer()
   --column-gap: 2rem;
 
   display: flex;
   flex-wrap: wrap;
-  gap: spacers.getSpacer(s) var(--column-gap);
+  gap: getSpacer(s) var(--column-gap);
 
   &--large {
-    row-gap: spacers.getSpacer(2xs);
+    row-gap: getSpacer(2xs);
   }
 }
 

package/components/HelpBubble/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .helpbubble {
   $bubble: &;
@@ -12,12 +12,12 @@
   align-items: flex-start !important;
   text-align: start;
   font-family: inherit;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-sm;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-md;
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
   }
 
   &__content {
@@ -26,8 +26,8 @@
     flex-direction: column;
     align-items: flex-start;
     overflow-wrap: anywhere;
-    row-gap: spacers.getSpacer(2xs);
-    padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(m);
+    row-gap: getSpacer(2xs);
+    padding: getSpacer(s) getSpacer(s) getSpacer(m);
 
     &--close {
       padding-right: 0;
@@ -41,11 +41,11 @@
   &__link {
     all: unset;
 
-    @include anchorlink.anchorlink;
+    @include anchorlink;
   }
 
   &__close {
     order: 2;
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0 0;
+    padding: getSpacer(2xs) getSpacer(2xs) 0 0;
   }
 }

package/components/HelpPanel/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../scss/palette' as palette;
+@import '../../scss/palette';
 
 .help-panel {
-  background-color: palette.$plum50 !important;
+  background-color: $plum50 !important;
 }

package/components/HelpQuestion/styles.module.scss

@@ -1,49 +1,49 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .helpquestion {
   display: inline-flex;
   align-items: center;
   text-align: left;
-  gap: spacers.getSpacer(2xs);
-  padding: spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(3xs);
+  gap: getSpacer(2xs);
+  padding: getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(3xs);
   border: 0;
   outline: none;
   background-color: transparent;
   cursor: pointer;
-  color: palette.$plum600;
+  color: $plum600;
   font-weight: 600;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-xs;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-xs;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    gap: spacers.getSpacer(2xs);
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-sm;
+    gap: getSpacer(2xs);
+    font-size: $font-size-md;
+    line-height: $lineheight-size-sm;
   }
 
   &:hover {
-    color: palette.$plum800;
-    background-color: rgba(palette.$plum600, 0.1);
+    color: $plum800;
+    background-color: rgba($plum600, 0.1);
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 3px palette.$black;
+    box-shadow: inset 0 0 0 3px $black;
   }
 
   &--selected {
-    color: palette.$plum800;
-    background-color: rgba(palette.$plum600, 0.1);
+    color: $plum800;
+    background-color: rgba($plum600, 0.1);
 
     &:hover {
-      background-color: rgba(palette.$plum600, 0.2);
+      background-color: rgba($plum600, 0.2);
     }
 
     &:focus-visible {
-      background-color: rgba(palette.$plum600, 0.1);
+      background-color: rgba($plum600, 0.1);
     }
   }
 }

package/components/HighlightPanel/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
+@import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
 @mixin content-wrapper-with-icon-flex {
@@ -17,7 +17,7 @@
 }
 
 @mixin content-wrapper-with-icon-padding {
-  padding-top: spacers.getSpacer(m);
+  padding-top: getSpacer(m);
 }
 
 .highlightpanel {
@@ -48,35 +48,35 @@
 
   &--large {
     #{$panel}__content-wrapper {
-      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
+      padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-top: spacers.getSpacer(l);
-        padding-bottom: spacers.getSpacer(xl);
+        padding-top: getSpacer(l);
+        padding-bottom: getSpacer(xl);
       }
     }
   }
 
   &--medium {
     #{$panel}__content-wrapper {
-      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
+      padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
+        padding: getSpacer(m) getSpacer(m) getSpacer(l);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: spacers.getSpacer(l);
+        padding: getSpacer(l);
       }
     }
   }
 
   // fluid skal ha bakgrunnsfarge på den ytre containeren
   &--fluid {
-    padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
+    padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
+      padding: getSpacer(m) getSpacer(m) getSpacer(l);
     }
 
     @each $color in $colors {
@@ -98,7 +98,7 @@
       @include content-wrapper-with-icon-flex-responsive;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: spacers.getSpacer(m);
+        padding-left: getSpacer(m);
       }
     }
   }
@@ -112,17 +112,17 @@
       @include content-wrapper-with-icon-padding;
 
       @media (min-width: map.get($grid-breakpoints, sm)) {
-        padding-left: spacers.getSpacer(s);
+        padding-left: getSpacer(s);
       }
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: spacers.getSpacer(m);
+        padding-left: getSpacer(m);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: 0;
-        padding-top: spacers.getSpacer(l);
-        padding-bottom: spacers.getSpacer(xl);
+        padding-top: getSpacer(l);
+        padding-bottom: getSpacer(xl);
       }
     }
 
@@ -134,7 +134,7 @@
         display: flex;
         justify-content: flex-end;
         margin-right: 0;
-        padding-right: spacers.getSpacer(s);
+        padding-right: getSpacer(s);
       }
     }
 
@@ -160,8 +160,8 @@
 
   &__icon {
     display: inline-flex;
-    margin-right: spacers.getSpacer(s);
-    margin-bottom: spacers.getSpacer(2xs);
+    margin-right: getSpacer(s);
+    margin-bottom: getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       margin-bottom: 0;

package/components/HorizontalScroll/styles.module.scss

@@ -1,6 +1,5 @@
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
 // Disables fordi stylelint og prettier er uenige
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
@@ -16,7 +15,7 @@ $gradient:
     display: flex;
 
     &:focus-visible {
-      outline: spacers.getSpacer(4xs) solid palette.$black;
+      outline: getSpacer(4xs) solid $black;
       outline-offset: -1px;
     }