@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [10.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.1.0&targetVersion=GTv10.2.0) (2025-02-18)
+
+### Features
+
+- nytt komponent drawer ([563a44e](https://github.com/helsenorge/designsystem/commit/563a44ee979ec777cdaea4a02134e3187000b3b9)), closes
+  [#339100](https://github.com/helsenorge/designsystem/issues/339100)
+- oppdatering på fontstack spesifikasjon
+  ([07f2f01](https://github.com/helsenorge/designsystem/commit/07f2f0197099c5d820d0c6caf727b898c86a2c6d)), closes
+  [#344729](https://github.com/helsenorge/designsystem/issues/344729)
+- **illustration:** nye illustrasjoner
+  ([e3bc97d](https://github.com/helsenorge/designsystem/commit/e3bc97d4b9e0cbf4e4d5a38afd587e4da5a29b22)), closes
+  [#339457](https://github.com/helsenorge/designsystem/issues/339457)
+
+### Bug Fixes
+
+- usebreakpoint oppdateres live igjen
+  ([fb93380](https://github.com/helsenorge/designsystem/commit/fb93380c21fa31f974224b977cfd82e7077d9f87)), closes
+  [#345242](https://github.com/helsenorge/designsystem/issues/345242)
+- **highlightpanel:** ikke rendre tittel to ganger og fiks bakgrunnsfarge i large size
+  ([73e0a71](https://github.com/helsenorge/designsystem/commit/73e0a7182f9473ddce3ff6db8cf5ad758d517d86)), closes
+  [#337117](https://github.com/helsenorge/designsystem/issues/337117) [#340928](https://github.com/helsenorge/designsystem/issues/340928)
+- **modal:** returnerer fokus ved lukk og 400 prosent zoom fiks for høyde
+  ([7695152](https://github.com/helsenorge/designsystem/commit/7695152fc6ce8a995ec61636b5de8b47ad0dd6ef)), closes
+  [#344549](https://github.com/helsenorge/designsystem/issues/344549)
+
 ## [10.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.3&targetVersion=GTv10.1.0) (2025-02-11)
 
 ### Features

package/components/AnchorLink/styles.module.scss

@@ -1,21 +1,20 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;
 
 @mixin anchorlink-hover {
   cursor: pointer;
-  color: $blueberry700;
-  background-color: $blueberry60010;
-  text-decoration-color: $blueberry600;
+  color: palette.$blueberry700;
+  background-color: palette.$blueberry60010;
+  text-decoration-color: palette.$blueberry600;
 }
 
 @mixin anchorlink-focus {
   outline: none;
-  border: $focus-width solid $black;
+  border: $focus-width solid palette.$black;
 }
 
 @mixin anchorlink {
@@ -24,11 +23,11 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: break-word;
   text-align: left;
-  color: $blueberry600;
+  color: palette.$blueberry600;
   border: $focus-width solid transparent;
   text-decoration: underline;
   text-underline-offset: 0.16rem;
-  text-decoration-color: $blueberry400;
+  text-decoration-color: palette.$blueberry400;
   text-decoration-thickness: $underline-width;
   padding: 0.1rem;
 

package/components/Avatar/styles.module.scss

@@ -1,13 +1,13 @@
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
 
 .avatar {
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 600;
-  background-color: $blueberry500;
-  color: $white;
+  background-color: palette.$blueberry500;
+  color: palette.$white;
 
   &--circle {
     border-radius: 50%;
@@ -18,7 +18,7 @@
   }
 
   &--black {
-    background-color: $neutral900;
+    background-color: palette.$neutral900;
   }
 
   &--selected#{&}--black {
@@ -28,14 +28,14 @@
   &--xsmall {
     width: 2.375rem;
     height: 2.375rem;
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 
   &--small {
     width: 3rem;
     height: 3rem;
-    font-size: $font-size-lg;
-    line-height: $lineheight-size-lg;
+    font-size: font-settings.$font-size-lg;
+    line-height: font-settings.$lineheight-size-lg;
   }
 }

package/components/Badge/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/palette';
+@use '../../scss/palette' as palette;
 
 .badge {
   display: inline-flex;
@@ -10,23 +10,23 @@
   height: 1.375rem;
   border-radius: 1rem;
   padding: 0 0.375rem;
-  color: $white;
-  background-color: $black;
+  color: palette.$white;
+  background-color: palette.$black;
   border: 1px solid;
 
   &--blueberry {
-    background-color: $blueberry500;
-    border-color: $blueberry600;
+    background-color: palette.$blueberry500;
+    border-color: palette.$blueberry600;
   }
 
   &--cherry {
-    background-color: $cherry500;
-    border-color: $cherry600;
+    background-color: palette.$cherry500;
+    border-color: palette.$cherry600;
   }
 
   &--neutral {
-    color: $black;
+    color: palette.$black;
     background-color: transparent;
-    border-color: $neutral600;
+    border-color: palette.$neutral600;
   }
 }

package/components/Button/styles.module.scss

@@ -1,25 +1,31 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(m) 0 getSpacer(3xs) 0 getSpacer(2xs),
-  'right-icon' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(3xs) 0 getSpacer(2xs) 0,
-  'left-icon' 'large' getSpacer(xs) getSpacer(m) getSpacer(s) getSpacer(l) 0 getSpacer(2xs) 0 getSpacer(xs),
-  'right-icon' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(s) getSpacer(2xs) 0 getSpacer(xs) 0,
-  'arrow' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(m) 0 getSpacer(l) 0,
-  'arrow' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(xs) getSpacer(l) 0 getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 getSpacer(s) 0 getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 getSpacer(m) 0 getSpacer(l) 0,
+  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
+    spacers.getSpacer(2xs),
+  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
+    spacers.getSpacer(2xs) 0,
+  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
+    spacers.getSpacer(xs),
+  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
+    spacers.getSpacer(xs) 0,
+  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+    spacers.getSpacer(l) 0,
+  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
+    spacers.getSpacer(xl) 0,
+  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
+  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
   'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem getSpacer(3xs) getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
+  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
+  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
 
 // Brukes til å aktivere hover styling uten at button hovres
 @mixin outline-borderless-hover {
@@ -34,11 +40,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin focus-shadow {
-  box-shadow: 0 0 0 getSpacer(3xs) $black;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
 }
 
 @mixin focus-shadow-on-dark {
-  box-shadow: 0 0 0 getSpacer(3xs) $white;
+  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;
 }
 
 @mixin outline-borderless-background($background-color, $hover-background-color) {
@@ -54,18 +60,18 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 @mixin outline($ouline-color, $hover-outline-color) {
-  outline: getSpacer(4xs) solid $ouline-color;
-  outline-offset: getSpacer(4xs) * -1;
+  outline: spacers.getSpacer(4xs) solid $ouline-color;
+  outline-offset: spacers.getSpacer(4xs) * -1;
 
   &:hover {
     box-shadow: none;
   }
 
   :disabled > & {
-    outline-color: $neutral700;
+    outline-color: palette.$neutral700;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      outline-color: $neutral500;
+      outline-color: palette.$neutral500;
     }
   }
 }
@@ -79,13 +85,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   :disabled > & {
     @media (min-width: map.get($grid-breakpoints, md)) {
-      color: $neutral700;
+      color: palette.$neutral700;
     }
   }
 }
 
 @mixin fill-on-dark($background-color) {
-  background-color: $white;
+  background-color: palette.$white;
 
   &:hover {
     box-shadow: none;
@@ -102,7 +108,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     &:hover {
       @include focus-shadow-on-dark;
 
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 
@@ -116,7 +122,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   color: $color;
 
   :disabled > & {
-    color: $neutral700;
+    color: palette.$neutral700;
   }
 }
 
@@ -125,7 +131,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include fill-on-dark(var(--color-action-background-ondark-hover));
   }
   &--on-dark#{&}--destructive {
-    @include fill-on-dark($cherry50);
+    @include fill-on-dark(palette.$cherry50);
   }
   &--on-dark#{&}--outline,
   &--on-dark#{&}--borderless,
@@ -134,11 +140,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     background-color: transparent;
 
     &:hover {
-      background-color: $inverted-hover;
+      background-color: palette.$inverted-hover;
     }
   }
   &--on-dark#{&}--outline {
-    outline-color: $white;
+    outline-color: palette.$white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -153,14 +159,14 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--on-dark &__text {
-    @include on-dark-text($blueberry600);
+    @include on-dark-text(palette.$blueberry600);
   }
   &--on-dark#{&}--destructive &__text {
-    @include on-dark-text($cherry600);
+    @include on-dark-text(palette.$cherry600);
   }
   &--on-dark#{&}--outline &__text,
   &--on-dark#{&}--borderless &__text {
-    color: $white;
+    color: palette.$white;
 
     :disabled > & {
       @media (min-width: map.get($grid-breakpoints, md)) {
@@ -195,9 +201,9 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 .button {
   display: inline-flex;
-  background-color: $blueberry500;
-  padding: 0 getSpacer(m);
-  font-size: $font-size-sm;
+  background-color: palette.$blueberry500;
+  padding: 0 spacers.getSpacer(m);
+  font-size: font-settings.$font-size-sm;
   font-weight: 600;
   font-family: inherit;
   line-height: 1.375rem;
@@ -211,37 +217,37 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   letter-spacing: unset;
 
   &:hover {
-    background-color: $blueberry700;
-    box-shadow: 0 0 0 getSpacer(3xs) $blueberry700;
+    background-color: palette.$blueberry700;
+    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
   }
 
   :disabled > & {
     pointer-events: none;
-    outline: getSpacer(4xs) dashed $neutral700;
-    outline-offset: getSpacer(4xs) * -1;
-    background-color: $neutral200;
+    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
+    outline-offset: spacers.getSpacer(4xs) * -1;
+    background-color: palette.$neutral200;
   }
 
   :disabled > & &__text {
-    color: $neutral800;
+    color: palette.$neutral800;
   }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     min-height: 3.125rem;
-    padding: 0 getSpacer(l);
-    font-size: $font-size-md;
+    padding: 0 spacers.getSpacer(l);
+    font-size: font-settings.$font-size-md;
     line-height: 1.5rem;
   }
 
   &--large {
     min-height: 3.5rem;
-    padding: 0 getSpacer(l);
+    padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 4.5rem;
-      padding: 0 getSpacer(xl);
-      font-size: $font-size-lg;
+      padding: 0 spacers.getSpacer(xl);
+      font-size: font-settings.$font-size-lg;
       line-height: 1.5rem;
     }
   }
@@ -271,11 +277,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   &--destructive {
-    background-color: $cherry500;
+    background-color: palette.$cherry500;
 
     &:hover {
-      background-color: $cherry700;
-      box-shadow: 0 0 0 getSpacer(3xs) $cherry700;
+      background-color: palette.$cherry700;
+      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
     }
   }
 
@@ -285,19 +291,19 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless-background(transparent, $cherry50);
+    @include outline-borderless-background(transparent, palette.$cherry50);
   }
 
   &--outline {
-    @include outline($blueberry700, $blueberry50);
+    @include outline(palette.$blueberry700, palette.$blueberry50);
   }
   &--outline#{&}--destructive {
-    @include outline($cherry700, $cherry50);
+    @include outline(palette.$cherry700, palette.$cherry50);
   }
 
   /* stylelint-disable-next-line */
   &--borderless:not(.button--only-icon) {
-    padding: 0 getSpacer(3xs);
+    padding: 0 spacers.getSpacer(3xs);
   }
 
   /* stylelint-disable-next-line */
@@ -323,7 +329,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   /* stylelint-disable-next-line */
   &__text {
-    color: $white;
+    color: palette.$white;
     margin: 0 auto 0 0;
     position: relative;
     display: flex;
@@ -356,7 +362,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
   &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include text-color($cherry600, $cherry700);
+    @include text-color(palette.$cherry600, palette.$cherry700);
   }
 
   /* stylelint-disable-next-line */
@@ -367,8 +373,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   @include on-dark;
 
   @include tiny-screens-media-query {
-    min-height: getSpacer(l);
-    padding: 0 getSpacer(xs);
+    min-height: spacers.getSpacer(l);
+    padding: 0 spacers.getSpacer(xs);
   }
 }
 
@@ -381,13 +387,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &__line {
     display: block;
-    border-bottom: getSpacer(4xs) dashed $neutral500;
+    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
     transform-origin: top left;
     transform: rotate(37.4deg);
   }
 
   &--on-dark &__line {
-    border-color: $white;
+    border-color: palette.$white;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;