@helsenorge/designsystem-react 3.0.0 → 3.0.1

package/components/List/styles.module.scss

@@ -26,6 +26,10 @@
               &::marker {
                 font-size: 1rem;
               }
+
+              > #{$list}--bullet {
+                list-style-type: '– ';
+              }
             }
           }
         }

package/components/ListHeader/ListHeader.d.ts

@@ -29,13 +29,15 @@ export interface ListHeaderProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-export declare const mapChildren: (children: React.ReactNode, isJsxChild?: boolean) => {
-    avatarChild?: React.ReactElement<AvatarProps, string | React.JSXElementConstructor<any>> | undefined;
-    listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>>;
-    badgeChild?: React.ReactElement<BadgeProps, string | React.JSXElementConstructor<any>> | undefined;
-    stringChildren: Array<string>;
-    remainingChildren: Array<any>;
-};
+interface ListHeaderChildren {
+    avatarChild?: React.ReactElement<AvatarProps>;
+    listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];
+    badgeChild?: React.ReactElement<BadgeProps>;
+    stringChildren: string[];
+    remainingChildren: React.ReactNode[];
+}
+type ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;
+export declare const mapChildren: ChildrenMapper;
 export declare const ListHeader: ListHeaderType;
 export default ListHeader;
 //# sourceMappingURL=ListHeader.d.ts.map

package/components/ListHeader/ListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAG1G,OAAe,EAAE,WAAW,EAAc,UAAU,EAAE,MAAM,WAAW,CAAC;AACxE,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,mBACP,SAAS,aACf,OAAO,QACZ,cAAc,gBACN,OAAO,SACd,MAAM,YAAY,KACxB,WAAW,GAAG,SAgBhB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,MAAM,YAAY,CAAC,mBAAmB,CAAC,CAAC;;oBAEtD,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAyEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAG1G,OAAe,EAAE,WAAW,EAAc,UAAU,EAAE,MAAM,WAAW,CAAC;AACxE,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,mBACP,SAAS,aACf,OAAO,QACZ,cAAc,gBACN,OAAO,SACd,MAAM,YAAY,KACxB,WAAW,GAAG,SAgBhB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC9C,sBAAsB,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClE,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC5C,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CACtC;AAED,KAAK,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,kBAAkB,GAAG,SAAS,CAAC;AAE1G,eAAO,MAAM,WAAW,EAAE,cAqCzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAyEvB,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/components/ListHeader/styles.module.scss

@@ -1,7 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_palette.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
 
 .list-header {
   display: flex;
@@ -16,9 +17,11 @@
     padding-top: getSpacer(s);
     padding-bottom: getSpacer(s);
   }
+
   &--top-align-content {
     align-items: flex-start;
   }
+
   &__title {
     font-size: inherit;
     font-weight: inherit;
@@ -26,6 +29,7 @@
     padding: 0;
     margin: 0;
   }
+
   &__content {
     border-bottom: 1px solid transparent;
     display: flex;
@@ -34,18 +38,22 @@
 
     &--string {
       margin: getSpacer(xs) 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         margin: getSpacer(s) 0;
       }
     }
+
     &--element {
       display: flex;
       align-items: flex-start;
       flex-direction: column;
     }
+
     &--spacing {
       margin-left: getSpacer(s);
     }
+
     :focus > &,
     :focus-visible > & {
       border-color: $black;
@@ -61,13 +69,16 @@
       &--medium {
         height: $lineheight-size-sm;
       }
+
       &--large {
         height: $lineheight-size-md;
       }
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         &--medium {
           height: $lineheight-size-md;
         }
+
         &--large {
           height: $lineheight-size-lg;
         }
@@ -78,10 +89,12 @@
   &__icon {
     &--for-string-content {
       margin: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         margin: getSpacer(2xs) getSpacer(2xs) getSpacer(2xs) 0;
       }
     }
+
     &--for-element-content {
       margin: 0 getSpacer(2xs) 0 0;
     }
@@ -90,10 +103,12 @@
   &__avatar {
     &--for-string-content {
       margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         margin: getSpacer(2xs) getSpacer(s) getSpacer(2xs) 0;
       }
     }
+
     &--for-element-content {
       margin: 0 getSpacer(s) 0 0;
     }
@@ -104,29 +119,37 @@
     display: flex;
     align-items: center;
     margin-left: getSpacer(2xs);
+
     &--for-string-content {
       margin: getSpacer(3xs) 0 getSpacer(3xs) auto;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         margin: getSpacer(2xs) 0 getSpacer(2xs) auto;
       }
     }
-    //Height needs to be same as line-height
+
+    // Height needs to be same as line-height
     &--small {
       height: $lineheight-size-xs;
     }
+
     &--medium {
       height: $lineheight-size-sm;
     }
+
     &--large {
       height: $lineheight-size-md;
     }
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       &--small {
         height: $lineheight-size-sm;
       }
+
       &--medium {
         height: $lineheight-size-md;
       }
+
       &--large {
         height: $lineheight-size-lg;
       }
@@ -137,6 +160,7 @@
 .statusDot {
   padding: 1rem;
 }
+
 .text-wrapper {
   display: flex;
   align-items: flex-start;
@@ -146,6 +170,7 @@
   &--sub-level {
     font-size: 18px;
   }
+
   &__text--emphasised {
     font-weight: 600;
   }

package/components/Loader/styles.module.scss

@@ -1,6 +1,6 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_screen-reader.scss';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/screen-reader';
 
 @mixin keyframes($name) {
   @keyframes #{$name} {
@@ -13,27 +13,31 @@
   animation-name: $name;
 }
 
-@mixin loaderDotScale($name, $scale-start, $scale-end) {
+@mixin loader-dot-scale($name, $scale-start, $scale-end) {
   @include keyframes($name) {
     0% {
       transform: scale($scale-start);
     }
+
     100% {
       transform: scale($scale-end);
     }
   }
+
   @include animate($name, scale, 0.6s, infinite);
 }
 
-@mixin loaderDotTranslate($name, $distance) {
+@mixin loader-dot-translate($name, $distance) {
   @include keyframes($name) {
     0% {
       transform: translate(0, 0);
     }
+
     100% {
       transform: translate($distance, 0);
     }
   }
+
   @include animate($name, translate, 0.6s, infinite);
 }
 
@@ -55,18 +59,16 @@
 
   &--overlay-screen {
     z-index: 9999;
-    background: $transparentGrey;
+    background: $transparent-grey;
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
   }
+
   &--overlay-parent {
     position: absolute;
     top: 0;
     left: 0;
-    background: $transparentGrey;
+    background: $transparent-grey;
     height: 100%;
     width: 100%;
   }
@@ -94,7 +96,7 @@
   }
 
   &__hidden-text {
-    @include sr-only();
+    @include sr-only;
   }
 
   &__dot {
@@ -108,10 +110,12 @@
       width: 12px;
       height: 12px;
     }
+
     &--medium {
       width: 18px;
       height: 18px;
     }
+
     &--large {
       width: 24px;
       height: 24px;
@@ -120,58 +124,72 @@
     &--banana {
       background-color: $banana500;
     }
+
     &--cherry {
       background-color: $cherry500;
     }
+
     &--kiwi {
       background-color: $kiwi500;
     }
+
     &--neutral {
       background-color: $neutral500;
     }
+
     &--plum {
       background-color: $plum500;
     }
+
     &--black {
       background-color: $black;
     }
+
     &--white {
       background-color: $white;
     }
 
     // Sets a form of easing animation curve
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
+
     // Scales up the first dot
     &:nth-child(1) {
-      @include loaderDotScale(scale-regular, 0, 1);
+      @include loader-dot-scale(scale-regular, 0, 1);
     }
 
     // Translates the dots rightwards depending on size
     &:nth-child(2),
     &:nth-child(3) {
-      @include loaderDotTranslate(translate-tiny, 16px);
+      @include loader-dot-translate(translate-tiny, 16px);
     }
+
     &:nth-child(3) {
       left: 16px;
     }
+
     &--small:nth-child(2),
     &--small:nth-child(3) {
-      @include loaderDotTranslate(translate-small, 24px);
+      @include loader-dot-translate(translate-small, 24px);
     }
+
     &--medium:nth-child(2),
     &--medium:nth-child(3) {
-      @include loaderDotTranslate(translate-medium, 36px);
+      @include loader-dot-translate(translate-medium, 36px);
     }
+
     &--large:nth-child(2),
     &--large:nth-child(3) {
-      @include loaderDotTranslate(translate-large, 48px);
+      @include loader-dot-translate(translate-large, 48px);
     }
+
     &--small:nth-child(3) {
       left: 24px;
     }
+
     &--medium:nth-child(3) {
       left: 36px;
     }
+
     &--large:nth-child(3) {
       left: 48px;
     }
@@ -179,14 +197,18 @@
     // Scales down the last dot
     &:nth-child(4) {
       left: 32px;
-      @include loaderDotScale(scale-reverse, 1, 0);
+
+      @include loader-dot-scale(scale-reverse, 1, 0);
     }
+
     &--small:nth-child(4) {
       left: 48px;
     }
+
     &--medium:nth-child(4) {
       left: 72px;
     }
+
     &--large:nth-child(4) {
       left: 96px;
     }

package/components/Logo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\n\ntype LogoColor = 'black' | 'white';\n\ninterface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Original = ({\n  size = 300,\n  color = 'black',\n  className = '',\n  testId,\n}: {\n  size?: number;\n  color?: LogoColor;\n  className?: string;\n  testId?: string;\n}): JSX.Element => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    role={'img'}\n    aria-labelledby=\"logo-title\"\n    viewBox=\"0 0 502 220\"\n    className={className}\n    data-testid={testId}\n    data-analyticsid={AnalyticsId.Logo}\n  >\n    <title id={'logo-title'}>Helsenorge</title>\n    <g fill={getColor(color, 500)}>\n      <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n    </g>\n  </svg>\n);\n\nconst Byline = ({\n  size = 300,\n  color = 'black',\n  className = '',\n  testId,\n}: {\n  size?: number;\n  color?: LogoColor;\n  className?: string;\n  testId?: string;\n}): JSX.Element => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    role={'img'}\n    aria-labelledby=\"logo-title\"\n    viewBox=\"0 0 87 12\"\n    className={className}\n    data-testid={testId}\n  >\n    <title id={'logo-title'}>Helsenorge</title>\n    <g fill={getColor(color, 500)}>\n      <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n    </g>\n  </svg>\n);\n\nfunction Logo(props: LogoProps): JSX.Element {\n  const { byline = false, ...restProps } = props;\n  return byline ? <Byline {...restProps} /> : <Original {...restProps} />;\n}\n\nexport default Logo;\n"],"names":["Original","size","color","className","testId","React","AnalyticsId","getColor","Byline","Logo","props","byline","restProps"],"mappings":"oPAqBA,MAAMA,EAAW,CAAC,CAChB,KAAAC,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMEC,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,cACR,UAAAE,EACA,cAAaC,EACb,mBAAkBE,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EACnCA,EAAA,cAAC,IAAE,CAAA,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,+pDAAA,CAAgqD,CAC1qD,CACF,EAGIG,EAAS,CAAC,CACd,KAAAP,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMEC,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,YACR,UAAAE,EACA,cAAaC,CAAA,EAEZC,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EACnCA,EAAA,cAAC,IAAE,CAAA,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,uxCAAA,CAAwxC,CAClyC,CACF,EAGF,SAASI,EAAKC,EAA+B,CAC3C,KAAM,CAAE,OAAAC,EAAS,GAAO,GAAGC,GAAcF,EAClC,OAAAC,kBAAUH,EAAQ,CAAA,GAAGI,EAAW,EAAKP,EAAA,cAACL,EAAU,CAAA,GAAGY,CAAW,CAAA,CACvE"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\n\ntype LogoColor = 'black' | 'white';\n\ninterface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Original = ({\n  size = 300,\n  color = 'black',\n  className = '',\n  testId,\n}: {\n  size?: number;\n  color?: LogoColor;\n  className?: string;\n  testId?: string;\n}): JSX.Element => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    role={'img'}\n    aria-labelledby=\"logo-title\"\n    viewBox=\"0 0 502 220\"\n    className={className}\n    data-testid={testId}\n    data-analyticsid={AnalyticsId.Logo}\n  >\n    <title id={'logo-title'}>{'Helsenorge'}</title>\n    <g fill={getColor(color, 500)}>\n      <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n    </g>\n  </svg>\n);\n\nconst Byline = ({\n  size = 300,\n  color = 'black',\n  className = '',\n  testId,\n}: {\n  size?: number;\n  color?: LogoColor;\n  className?: string;\n  testId?: string;\n}): JSX.Element => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    role={'img'}\n    aria-labelledby=\"logo-title\"\n    viewBox=\"0 0 87 12\"\n    className={className}\n    data-testid={testId}\n  >\n    <title id={'logo-title'}>{'Helsenorge'}</title>\n    <g fill={getColor(color, 500)}>\n      <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n    </g>\n  </svg>\n);\n\nfunction Logo(props: LogoProps): JSX.Element {\n  const { byline = false, ...restProps } = props;\n  return byline ? <Byline {...restProps} /> : <Original {...restProps} />;\n}\n\nexport default Logo;\n"],"names":["Original","size","color","className","testId","React","AnalyticsId","getColor","Byline","Logo","props","byline","restProps"],"mappings":"oPAqBA,MAAMA,EAAW,CAAC,CAChB,KAAAC,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMEC,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,cACR,UAAAE,EACA,cAAaC,EACb,mBAAkBE,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAe,YAAa,EACvCA,EAAA,cAAC,IAAE,CAAA,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,+pDAAA,CAAgqD,CAC1qD,CACF,EAGIG,EAAS,CAAC,CACd,KAAAP,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMEC,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,YACR,UAAAE,EACA,cAAaC,CAAA,EAEZC,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAe,YAAa,EACvCA,EAAA,cAAC,IAAE,CAAA,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,uxCAAA,CAAwxC,CAClyC,CACF,EAGF,SAASI,EAAKC,EAA+B,CAC3C,KAAM,CAAE,OAAAC,EAAS,GAAO,GAAGC,GAAcF,EAClC,OAAAC,kBAAUH,EAAQ,CAAA,GAAGI,EAAW,EAAKP,EAAA,cAACL,EAAU,CAAA,GAAGY,CAAW,CAAA,CACvE"}

package/components/MaxCharacters/styles.module.scss

@@ -1,7 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .max-characters {
   display: flex;
@@ -11,7 +12,7 @@
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     line-height: $lineheight-size-md;
     font-size: $font-size-md;
   }
@@ -19,6 +20,7 @@
   &--on-dark {
     color: $white;
   }
+
   &--invalid {
     color: $cherry600;
     font-weight: 600;

package/components/Modal/styles.module.scss

@@ -1,18 +1,16 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
 
 .modal-overlay {
-  background: rgba(51, 51, 51, 0.75);
+  background: rgb(51 51 51 / 75%);
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 
   @media print {
     position: absolute;
@@ -32,7 +30,7 @@
 
 .modal {
   pointer-events: auto;
-  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
   background-color: $white;
   animation: open 200ms 1;
 
@@ -40,6 +38,7 @@
     &--error {
       color: $cherry600;
     }
+
     &--success {
       color: $kiwi900;
     }
@@ -48,6 +47,7 @@
   &__iconWrapper {
     padding-right: getSpacer(xs);
   }
+
   &__afterTitleChildren {
     padding-left: getSpacer(xs);
   }
@@ -59,12 +59,15 @@
   &--normal {
     background-color: $white;
   }
+
   &--error {
     background-color: $cherry100;
   }
+
   &--warning {
     background-color: $banana50;
   }
+
   &--success {
     background-color: $kiwi50;
   }
@@ -72,16 +75,19 @@
   &--large {
     width: calc(100vw - 0.75rem);
     padding-bottom: getSpacer(l);
-    @media (max-width: map-get($grid-breakpoints, sm)) {
+
+    @media (max-width: map.get($grid-breakpoints, sm)) {
       p {
         font-size: 1.125rem;
       }
     }
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding-bottom: getSpacer(xl);
       width: 612px;
     }
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 696px;
     }
   }
@@ -89,10 +95,12 @@
   &--medium {
     width: calc(100vw - 0.75rem);
     padding-bottom: getSpacer(m);
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       width: 335px;
     }
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 515px;
     }
   }
@@ -103,7 +111,8 @@
 
   &--image {
     padding: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       max-height: calc(100vh - 24px);
       max-width: calc(100vw - 24px);
       width: 100%;
@@ -119,13 +128,13 @@
   }
 
   &__shadow--top {
-    //box-shadow: 0 3px 8px 4px grey;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45702030812324934) 100%);
+    // box-shadow: 0 3px 8px 4px grey;
+    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
   }
 
   &__shadow--bottom {
-    //box-shadow: 0 -3px 8px 4px grey;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45702030812324934) 100%);
+    // box-shadow: 0 -3px 8px 4px grey;
+    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
     margin-top: -16px;
   }
 
@@ -166,13 +175,16 @@
     &__scroll {
       &--large {
         padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
-        @media (min-width: map-get($grid-breakpoints, md)) {
+
+        @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs) getSpacer(xl);
         }
       }
+
       &--medium {
         padding: getSpacer(l) getSpacer(m) getSpacer(2xs) getSpacer(m);
-        @media (min-width: map-get($grid-breakpoints, md)) {
+
+        @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
         }
       }
@@ -184,6 +196,7 @@
     &__title {
       display: flex;
       align-items: center;
+
       div {
         display: flex;
         justify-content: center;
@@ -194,6 +207,7 @@
     &__imageWrapper {
       line-height: 0;
       text-align: center;
+
       img {
         max-height: calc(100vh - 185px);
         max-width: calc(100vw - 57px);
@@ -220,10 +234,12 @@
 
     &--large {
       padding: getSpacer(l) getSpacer(m) 0 getSpacer(m);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(l) getSpacer(xl) 0 getSpacer(xl);
       }
     }
+
     &--medium {
       padding: getSpacer(m) getSpacer(m) 0 getSpacer(m);
     }

package/components/NotificationPanel/DetailButton/styles.module.scss

@@ -1,22 +1,25 @@
-@import '../../../scss/_spacers.scss';
-@import '../../../scss/_breakpoints.scss';
-@import '../../../scss/_font-settings.scss';
-@import '../../../scss/_palette.scss';
+@import '../../../scss/spacers';
+@import '../../../scss/breakpoints';
+@import '../../../scss/font-settings';
+@import '../../../scss/palette';
 
 .notification-panel__detail-section {
   display: flex;
   flex-direction: column-reverse;
+
   &__button--wrapper {
-    padding: 0.375rem 0 0.625rem 0;
+    padding: 0.375rem 0 0.625rem;
     font-size: $font-size-xs;
     line-height: $lineheight-size-xs;
   }
+
   &__content {
     padding: getSpacer(3xs) 0;
     font-size: $font-size-xs;
     line-height: $lineheight-size-xs;
   }
 }
+
 html .notification-panel__detail.notification-panel__detail-button {
   text-decoration: underline;
   text-decoration-color: $blueberry600;
@@ -28,6 +31,7 @@ html .notification-panel__detail.notification-panel__detail-button {
   font-size: $font-size-sm;
   line-height: 1.625rem;
   height: 1.625rem;
+
   @media (min-width: 0) {
     min-height: unset;
   }