@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/scss/_fonts.scss

@@ -1,4 +1,4 @@
-@import './font-settings.scss';
+@import './font-settings';
 
 /* latin */
 @font-face {
@@ -7,8 +7,9 @@
   font-weight: 200;
   font-display: swap;
   src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
-    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
+    url('../fonts/source-sans-pro-200-extralight.woff') format('woff'), url('../fonts/source-sans-pro-200-extralight.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -16,18 +17,20 @@
   font-weight: 200;
   font-display: swap;
   src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-200-extralight-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-300-light.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -35,35 +38,41 @@
   font-weight: 300;
   font-display: swap;
   src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
-    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-300-light-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('../fonts/source-sans-pro-400-regular.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('../fonts/source-sans-pro-600-semibold.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -71,18 +80,20 @@
   font-weight: 600;
   font-display: swap;
   src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-600-semibold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/source-sans-pro-700-bold.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -90,17 +101,20 @@
   font-weight: 700;
   font-display: swap;
   src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-700-bold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
+  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url('../fonts/source-sans-pro-900-black.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black.woff2') format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -108,5 +122,6 @@
   font-weight: 900;
   font-display: swap;
   src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
-    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
+    url('../fonts/source-sans-pro-900-black-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black-italic.woff2') format('woff2');
 }

package/scss/_grid.scss

@@ -1,5 +1,6 @@
 $enable-deprecation-messages: true;
-@import 'bootstrap/scss/vendor/_rfs.scss';
-@import 'bootstrap/scss/mixins/_deprecate.scss';
-@import 'bootstrap/scss/mixins/_breakpoints.scss';
-@import 'bootstrap/scss/mixins/_grid.scss';
+
+@import 'bootstrap/scss/vendor/rfs';
+@import 'bootstrap/scss/mixins/deprecate';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/grid';

package/scss/_input.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @mixin input-wrapper {
   width: 100%;
 
@@ -9,7 +11,7 @@
     font-weight: 600;
     padding-bottom: getSpacer(xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       line-height: getSpacer(l);
       font-size: $font-size-md;
     }
@@ -55,17 +57,18 @@
   &:hover {
     background: $neutral50;
     border-color: $neutral700;
-    box-shadow: 0px 0px 0px 1px $neutral700;
+    box-shadow: 0 0 0 1px $neutral700;
 
     &:focus-within {
       border-color: $black;
-      box-shadow: 0px 0px 0px 2px $black;
+      box-shadow: 0 0 0 2px $black;
     }
   }
+
   &:focus-within {
     background: $white;
     border-color: $neutral900;
-    box-shadow: 0px 0px 0px 2px $neutral900;
+    box-shadow: 0 0 0 2px $neutral900;
   }
 
   &--on-blueberry {
@@ -73,43 +76,49 @@
 
     &:hover {
       background: $blueberry50;
-      box-shadow: 0px 0px 0px 1px $blueberry500;
+      box-shadow: 0 0 0 1px $blueberry500;
       border-color: $blueberry500;
     }
 
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--on-dark {
     border-color: $blueberry900;
+
     &:hover {
       background: $blueberry50;
       border-color: $blueberry900;
-      box-shadow: 0px 0px 0px 1px $blueberry900;
+      box-shadow: 0 0 0 1px $blueberry900;
     }
+
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--invalid {
     border-color: $cherry600;
 
     &:hover {
       background: $cherry100;
       border-color: $cherry600;
-      box-shadow: 0px 0px 0px 2px $cherry600;
+      box-shadow: 0 0 0 2px $cherry600;
     }
+
     &:focus-within {
       background: $white;
       border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
+      box-shadow: 0 0 0 2px $neutral900;
     }
   }
+
   &--transparent {
     background: transparent;
 
@@ -153,7 +162,7 @@
     background-color: transparent;
     width: 100%;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: $font-size-md;
     }
 

package/scss/_palette.scss

@@ -1,17 +1,15 @@
-$black: #000000;
-$white: #ffffff;
-
-$banana50: #fcf2bf;
-$banana100: #f9ea9f;
-$banana200: #f5e080;
-$banana300: #f1d460;
+$black: #000;
+$white: #fff;
+$banana50: #fdf8df;
+$banana100: #fcf2bf;
+$banana200: #f9ea9f;
+$banana300: #f5e080;
 $banana400: #ebc840;
 $banana500: #ddab06;
 $banana600: #c59302;
 $banana700: #ab7c00;
 $banana800: #916500;
 $banana900: #764f00;
-
 $blueberry50: #e4f7f9;
 $blueberry100: #cae7ed;
 $blueberry200: #afdae3;
@@ -22,7 +20,6 @@ $blueberry600: #126f87;
 $blueberry700: #08667c;
 $blueberry800: #06596c;
 $blueberry900: #084350;
-
 $cherry50: #fff2ea;
 $cherry100: #f7e1d2;
 $cherry200: #eec0a5;
@@ -33,7 +30,6 @@ $cherry600: #b62e1c;
 $cherry700: #a31f0e;
 $cherry800: #912112;
 $cherry900: #7e1c0e;
-
 $kiwi50: #e6f8ee;
 $kiwi100: #c2edd6;
 $kiwi200: #9de2bf;
@@ -44,7 +40,6 @@ $kiwi600: #10b172;
 $kiwi700: #0ca161;
 $kiwi800: #099150;
 $kiwi900: #078141;
-
 $neutral50: #f5f3f3;
 $neutral100: #eae7e7;
 $neutral200: #d6d4d3;
@@ -55,7 +50,6 @@ $neutral600: #7d7c79;
 $neutral700: #62625f;
 $neutral800: #474745;
 $neutral900: #2b2c2b;
-
 $plum50: #efe4fd;
 $plum100: #d7bdf9;
 $plum200: #bf98f3;
@@ -66,10 +60,8 @@ $plum600: #6a2abf;
 $plum700: #5b22a6;
 $plum800: #4c1b8c;
 $plum900: #3c1471;
-
 $inverted-hover: #ffffff0d;
-$transparentGrey: rgba(102, 102, 102, 0.75);
-
+$transparent-grey: rgb(102 102 102 / 75%);
 $palette-map: (
   'banana50': $banana50,
   'banana100': $banana100,

package/scss/_print.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import 'palette';
 @import 'breakpoints';
 
@@ -14,10 +15,11 @@
   }
 
   body {
-    min-width: map-get($grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
+
   .container {
-    min-width: map-get($grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
 
   abbr[title]::after {
@@ -60,120 +62,158 @@
   }
 
   .col-print-1 {
-    max-width: 8.33333%;
+    max-width: 8.3333%;
   }
+
   .col-print-2 {
-    max-width: 16.66667%;
+    max-width: 16.6667%;
   }
+
   .col-print-3 {
     max-width: 25%;
   }
+
   .col-print-4 {
-    max-width: 33.33333%;
+    max-width: 33.3333%;
   }
+
   .col-print-5 {
-    max-width: 41.66667%;
+    max-width: 41.6667%;
   }
+
   .col-print-6 {
     max-width: 50%;
   }
+
   .col-print-7 {
-    max-width: 58.33333%;
+    max-width: 58.3333%;
   }
+
   .col-print-8 {
-    max-width: 66.66667%;
+    max-width: 66.6667%;
   }
+
   .col-print-9 {
     max-width: 75%;
   }
+
   .col-print-10 {
-    max-width: 83.33333%;
+    max-width: 83.3333%;
   }
+
   .col-print-11 {
-    max-width: 91.66667%;
+    max-width: 91.6667%;
   }
+
   .col-print-12 {
     max-width: 100%;
   }
+
   .order-print-first {
     order: -1;
   }
+
   .order-print-last {
     order: 13;
   }
+
   .order-print-0 {
     order: 0;
   }
+
   .order-print-1 {
     order: 1;
   }
+
   .order-print-2 {
     order: 2;
   }
+
   .order-print-3 {
     order: 3;
   }
+
   .order-print-4 {
     order: 4;
   }
+
   .order-print-5 {
     order: 5;
   }
+
   .order-print-6 {
     order: 6;
   }
+
   .order-print-7 {
     order: 7;
   }
+
   .order-print-8 {
     order: 8;
   }
+
   .order-print-9 {
     order: 9;
   }
+
   .order-print-10 {
     order: 10;
   }
+
   .order-print-11 {
     order: 11;
   }
+
   .order-print-12 {
     order: 12;
   }
+
   .offset-print-0 {
     margin-left: 0;
   }
+
   .offset-print-1 {
-    margin-left: 8.33333%;
+    margin-left: 8.3333%;
   }
+
   .offset-print-2 {
-    margin-left: 16.66667%;
+    margin-left: 16.6667%;
   }
+
   .offset-print-3 {
     margin-left: 25%;
   }
+
   .offset-print-4 {
-    margin-left: 33.33333%;
+    margin-left: 33.3333%;
   }
+
   .offset-print-5 {
-    margin-left: 41.66667%;
+    margin-left: 41.6667%;
   }
+
   .offset-print-6 {
     margin-left: 50%;
   }
+
   .offset-print-7 {
-    margin-left: 58.33333%;
+    margin-left: 58.3333%;
   }
+
   .offset-print-8 {
-    margin-left: 66.66667%;
+    margin-left: 66.6667%;
   }
+
   .offset-print-9 {
     margin-left: 75%;
   }
+
   .offset-print-10 {
-    margin-left: 83.33333%;
+    margin-left: 83.3333%;
   }
+
   .offset-print-11 {
-    margin-left: 91.66667%;
+    margin-left: 91.6667%;
   }
 }

package/scss/_screen-reader.scss

@@ -30,7 +30,6 @@
 @mixin sr-only() {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-  -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important; /* 2 */
   height: 1px !important;
   margin: -1px !important;
@@ -54,7 +53,6 @@
   &:active,
   &:focus {
     clip: auto !important;
-    -webkit-clip-path: none !important;
     clip-path: none !important;
     height: auto !important;
     margin: auto !important;

package/scss/_spacers.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $spacer: 1rem;
 $spacers: (
   0: 0,
@@ -17,24 +19,24 @@ $spacers: (
 );
 
 @function getSpacer($spacerSize) {
-  $spacerValue: map-get(
+  $spacer-value: map.get(
     (
-      4xs: map-get($spacers, 1),
-      3xs: map-get($spacers, 2),
-      2xs: map-get($spacers, 3),
-      xs: map-get($spacers, 4),
-      s: map-get($spacers, 5),
-      m: map-get($spacers, 6),
-      l: map-get($spacers, 7),
-      xl: map-get($spacers, 8),
-      2xl: map-get($spacers, 9),
-      3xl: map-get($spacers, 10),
-      4xl: map-get($spacers, 11),
-      5xl: map-get($spacers, 12),
-      6xl: map-get($spacers, 13),
+      4xs: map.get($spacers, 1),
+      3xs: map.get($spacers, 2),
+      2xs: map.get($spacers, 3),
+      xs: map.get($spacers, 4),
+      s: map.get($spacers, 5),
+      m: map.get($spacers, 6),
+      l: map.get($spacers, 7),
+      xl: map.get($spacers, 8),
+      2xl: map.get($spacers, 9),
+      3xl: map.get($spacers, 10),
+      4xl: map.get($spacers, 11),
+      5xl: map.get($spacers, 12),
+      6xl: map.get($spacers, 13),
     ),
     $spacerSize
   );
 
-  @return $spacerValue;
+  @return $spacer-value;
 }

package/scss/_title.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import './spacers';
 @import './breakpoints';
 @import './font-settings';
@@ -6,7 +7,8 @@
   font-size: 2.375rem;
   line-height: 2.875rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 4rem;
     line-height: 5rem;
   }
@@ -16,7 +18,8 @@
   font-size: 2.25rem;
   line-height: 2.75rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 3.25rem;
     line-height: 3.75rem;
   }
@@ -26,7 +29,8 @@
   font-size: 1.625rem;
   line-height: 2.125rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 2rem;
     line-height: 2.75rem;
   }
@@ -36,7 +40,8 @@
   font-size: 1.375rem;
   line-height: 1.875rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 2rem;
   }
@@ -53,7 +58,8 @@
   line-height: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-sm;
   }
 }

package/scss/helsenorge.scss

@@ -1,7 +1,7 @@
 @import 'reset';
 @import 'spacers';
 @import 'breakpoints';
-@import 'bootstrap/scss/bootstrap-grid.scss';
+@import 'bootstrap/scss/bootstrap-grid';
 @import 'palette';
 @import 'fonts';
 @import 'body';